JSFiddle - React, Tailwind, and code Playground

by M F

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {

    axisX: {
        valueFormatString: "YYYY-MM-DD",
        tickLength: 5,
        gridThickness: 1,
        labelAngle: -60,
        labelAutoFit: false
    },
    axisY: {
        valueFormatString: "#0$"
    },
    data: [{
        type: "line",
        showInLegend: true,
        legendText: "Sales",
        indexLabelFontColor: '#ff4400',
        indexLabelBackgroundColor: '#ffffff',
        dataPoints: [{
            x: new Date(2006, 12, 27),
            y: 127937,
            label: "2006-12-27"
        }, {
            x: new Date(2007, 1, 3),
            y: 102678,
            label: ""
        }, {
            x: new Date(2007, 1, 10),
            y: 101180,
            label: ""
        }, {
            x: new Date(2007, 1, 17),
            y: 96111,
            label: ""
        }, {
            x: new Date(2007, 1, 24),
            y: 99960,
            label: ""
        }, {
            x: new Date(2007, 1, 31),
            y: 90223,
            label: "",
            indexLabel: 'test event 1',
            markerType: "triangle",
            markerColor: "#6B8E23",
            markerSize: 12
        }, {
            x: new Date(2007, 2, 7),
            y: 103858,
            label: ""
        }, {
            x: new Date(2007, 2, 14),
            y: 119192,
            label: ""
        }, {
            x: new Date(2007, 2, 21),
            y: 99457,
            label: ""
        }, {
            x: new Date(2007, 2, 28),
            y: 103149,
            label: ""
        }, {
            x: new Date(2007, 3, 7),
            y: 99108,
            label: ""
        }, {
            x: new Date(2007, 3, 14),
            y: 95631,
            label: ""
        }, {
            x: new Date(2007, 3, 21),
            y: 96127,
            label: ""
        }, {
            x: new Date(2007, 3, 28),
            y: 99745,
            label: ""
        }, {
            x: new Date(2007, 4, 4),
       ...