Chartjs-Using Radar Chart inside react component

by

0👍

✅

So this link was helpful for me.

https://blog.bitsrc.io/customizing-chart-js-in-react-2199fa81530a

And I modified my code in the component in this manner:

class Name extends Component {
state = {
    id: null
}

chartRef = React.createRef();

componentDidMount() {
    const myChartRef = this.chartRef.current.getContext("2d");

    new Chart(myChartRef, {
        type: "radar",
        data: {
            labels: ["In Person Call", "RTE", "MobilePush", "Speaker Program"],
            datasets: [
                {
                    label: "My Second dataset",
                    backgroundColor: "rgba(26,179,148,0.2)",
                    borderColor: "rgba(26,179,148,1)",
                    pointBackgroundColor: "rgba(26,179,148,1)",
                    pointBorderColor: "rgba(26,179,148,1)",
                    data: [28, 48, 40, 19]
                }
            ]
        },
        options: {
            responsive: true,
            legend: {
                display: false
            }
        }
    })
}

return (
    <div>
        <canvas id="myChart" ref={this.chartRef} height="180"/>
    </div>
)

Leave a comment