JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="control_panel_container">
    <input class="control_panel_tabs" id="cp_tab1" type="radio" name="cp_tabs" checked>
    <label class="control_panel_tabs" for="cp_tab1">tab 1</label>
    <input class="control_panel_tabs" id="cp_tab2" type="radio" name="cp_tabs">
    <label class="control_panel_tabs" for="cp_tab2">tab 2</label>
    <div class="cp_content_container">
        <div id="cp_content1"></div>
        <div id="cp_content2">
            <div id="chartContainer" style="height: 300px; width: 100%;"></div>
        </div>
    </div>
</div>

CSS

#control_panel_container {
    text-align: center;
}
.cp_content_container {
    padding-top: 12px;
    text-align: left;
    color: #373737;
}
.cp_content_container > div {
    display: none;
}
input.control_panel_tabs {
    display: none;
}
label.control_panel_tabs {
    font-family: Verdana, Tahoma, sans-serif;
    font-weight: 600;
    background-color: #C0B9C7;
    color: white;
    display: inline-block;
    padding: 15px 25px;
    text-align: center;
    border: 2px solid black;
    border-radius: 15px;
}
label.control_panel_tabs:hover {
    background-color: #AA95B9;
    color: #fff;
    cursor: pointer;
}
input:checked + label.control_panel_tabs {
    background: #9471AB;
    color: #fff;
}
#cp_tab1:checked ~ .cp_content_container #cp_content1, #cp_tab2:checked ~ .cp_content_container #cp_content2 {
    display: block;
}

JavaScript

window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
        zoomEnabled: false,
        animationEnabled: true,
        title: {
            text: "Mobile Phone Subscriptions"
        },
        axisY2: {
            valueFormatString: "0.0 bn",

            maximum: 1.2,
            interval: .2,
            interlacedColor: "#F5F5F5",
            gridColor: "#D7D7D7",
            tickColor: "#D7D7D7"
        },
        theme: "theme2",
        toolTip: {
            shared: true
        },
        legend: {
            verticalAlign: "bottom",
            horizontalAlign: "center",
            fontSize: 15,
            fontFamily: "Lucida Sans Unicode"

        },
        data: [{
            type: "line",
            lineThickness: 3,
            axisYType: "secondary",
            showInLegend: true,
            name: "India",
            dataPoints: [{
                x: new Date(2001, 0),
                y: 0
            }, {
                x: new Date(2002, 0),
                y: 0.001
            }, {
                x: new Date(2003, 0),
                y: 0.01
            }, {
                x: new Date(2004, 0),
                y: 0.05
            }, {
                x: new Date(2005, 0),
                y: 0.1
            }, {
                x: new Date(2006, 0),
                y: 0.15
            }, {
                x: new Date(2007, 0),
                y: 0.22
            }, {
                x: new Date(2008, 0),
                y: 0.38
            }, {
                x: new Date(2009, 0),
                y: 0.56
            }, {
                x: new Date(2010, 0),
                y: 0.77
            }, {
                x: new Date(2011, 0),
                y: 0.91
            }, {
                x: new Date(2012, 0),
                y: 0.94
            }


            ]
        }, {
            type: "line",
            lineThickness: 3,
            showInLegend: true,
            name: "China",
        ...