JSFiddle - React, Tailwind, and code Playground

by koromanoj

HTML

<!DOCTYPE HTML>

<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

JavaScript

window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "Gaming Consoles Sold in 2012",
        },
        legend: {
            maxWidth: 350,
            itemWidth: 120,
        },
        data: [
            {
                type: "pie",
                showInLegend: true,
                legendText: "{indexLabel}",
                dataPoints: [
                    {
                        y: 4181563,
                        indexLabel: "PlayStation 3",
                        indexLabelFormatter: function (e) {
                            console.log(e);
                            console.log(e.dataPoint);
                            //want to get the legend color value/code of PlayStation 3. i.e BLUE
                            //console.log(chart.legend.get('legendMarkerColor'));
                        },
                    },
                    { y: 2175498, indexLabel: "Wii" },
                    { y: 3125844, indexLabel: "Xbox 360" },
                    { y: 1176121, indexLabel: "Nintendo DS" },
                    { y: 1727161, indexLabel: "PSP" },
                    { y: 4303364, indexLabel: "Nintendo 3DS" },
                    { y: 1717786, indexLabel: "PS Vita" },
                ],
            },
        ],
    });
    chart.render();
};