Framer chartjs

Chart.tsx

import { useState } from "react"
import { motion } from "framer-motion"
import { addPropertyControls, ControlType } from "framer"
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js"
import { Doughnut } from "react-chartjs-2"

ChartJS.register(ArcElement, Tooltip, Legend)

export default function Chart(props) {
    const { tint, style, data1, data2, data3, data4, data5, data6 } = props

    const data = {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [
            {
                label: "# of Votes",
                data: [
                    props.data1,
                    props.data2,
                    props.data3,
                    props.data4,
                    props.data5,
                    props.data6,
                ],
                backgroundColor: [
                    "rgba(255, 99, 132, 0.2)",
                    "rgba(54, 162, 235, 0.2)",
                    "rgba(255, 206, 86, 0.2)",
                    "rgba(75, 192, 192, 0.2)",
                    "rgba(153, 102, 255, 0.2)",
                    "rgba(255, 159, 64, 0.2)",
                ],
                borderColor: [
                    "rgba(255, 99, 132, 1)",
                    "rgba(54, 162, 235, 1)",
                    "rgba(255, 206, 86, 1)",
                    "rgba(75, 192, 192, 1)",
                    "rgba(153, 102, 255, 1)",
                    "rgba(255, 159, 64, 1)",
                ],
                borderWidth: 1,
            },
        ],
    }

    const [active, setActive] = useState(false)

    return (
        <motion.div style={{ ...style, ...containerStyle }}>
            <Doughnut data={data} />
        </motion.div>
    )
}

Chart.defaultProps = {
    tint: "#09F",
    data1: 2,
    data2: 2,
    data3: 1,
    data4: 2,
    data5: 1,
    data6: 2,
}

addPropertyControls(Chart, {
    tint: {
        title: "Tint",
        type: ControlType.Color,
    },
    data1: {
        title: "Data 1",
        type: ControlType.Number,
    },
    data2: {
        title: "Data 2",
        type: ControlType.Number,
    },
    data3: {
        title: "Data 3",
        type: ControlType.Number,
    },
    data4: {
        title: "Data 4",
        type: ControlType.Number,
    },
    data5: {
        title: "Data 5",
        type: ControlType.Number,
    },
    data6: {
        title: "Data 6",
        type: ControlType.Number,
    },
})

const containerStyle = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden",
}