JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer"></div>

JavaScript

window.onload = function () {


            var dps = [
               { y: 4181563, legendText: "PS 3", indexLabel: "PlayStation 3" },
               { y: 2175498, legendText: "Wii", indexLabel: "Wii" },
               { y: 3125844, legendText: "360", indexLabel: "Xbox 360" }
            ]

            var chart = new CanvasJS.Chart("chartContainer", {
                theme: "theme2",
                animationEnabled: false,
                title: {
                    text: "Gaming Consoles Sold in 2012"
                },
                legend: {
                    verticalAlign: "bottom",
                    horizontalAlign: "center"
                },
                data: [{
                    type: "pie",
                    showInLegend: true,
                    dataPoints: dps
                }]
            });

            chart.render();

            var updateInterval = 1000;

            var updateChart = function () {
                var newdps = { y: getRandomInt(2000000, 300000000), legendText: "PS 3", indexLabel: "PlayStation 3" };

                dps.push(newdps);
                chart.render();
                // $.ajax({
                //url: "/echo/json/",
                // type: 'json',
                //success: function (data) {
                //dps.push(data);

                //chart.render();

                // update chart after specified time. 
                // }
                //});
            };

            setInterval(function () { updateChart() }, updateInterval);


        }
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }