JSFiddle - React, Tailwind, and code Playground

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
 <div id="chartContainer1" style="width: 45%; height: 300px;display: inline-block;"></div>
    <button id="exportChart1">Export Chart</button>
    <div id="chartContainer2" style="width: 45%; height: 300px;display: inline-block;"></div>
    <button id="exportChart2">Export Chart</button>

JavaScript

function CreateChart(chartcontainerName,HTMLValue,TitleText,SubTitleText,ChartType)
{
    var chart = new CanvasJS.Chart(chartcontainerName, {
        theme: "light1",
        title: {
            text: TitleText
        },
        axisX: {
            title: "Month"

        },
        axisY: {
            title: "Problem Count(No)"
        },
        subtitles: [
            { text: SubTitleText }
        ],
        data: [
        {
            type: ChartType, //change type to bar, line, area, pie, etc
            //Uncomment below line to add data coming from the controller.
            dataPoints: [{"label":"February","y":0.0},{"label":"March","y":0.0},{"label":"April","y":17.0},{"label":"May","y":8.0}],
        }
        ]
    });
    
    return chart
}
function ExportTheChart(Chart,szElementID,szFormat)
{
    document.getElementById(szElementID).addEventListener("click", function () {
        Chart.exportChart({ format: szFormat });
    });
}
    
        window.onload = function () {
            var chart1 = CreateChart('chartContainer1',1,"Problem Open Count","Month versus Problem count","column");
            chart1.render();
            ExportTheChart(chart1,'exportChart1',"jpg");

            var chart2 = CreateChart('chartContainer2',2,"Problem Closed Count","Month versus Problem count","column");
            chart2.render();
            ExportTheChart(chart2,'exportChart2',"jpg");
        }
        // window.onload = LoadChart();