JSFiddle - React, Tailwind, and code Playground

by pentium10

HTML

<div id="mychart"></div>

CSS

#mychart {
    margin:10px 10px 10px 10px;
    width:90%;
    max-width: 800px;
    height:400px;
}

JavaScript

var myDataValues = [{
    "lot": "13000",
    "bucket1": 17204.00},
{
    "lot": "14000",
    "bucket2": 20196.00}];

var styleDef = {
    series: {
        bucket1: {
            line: {

                weight: 5
            },
            marker: {
                fill: {

                },
                border: {
                    weight: 1,

                },
                width: 4,
                height: 4
            }
        },
        bucket2: {
            line: {

                weight: 5
            },
            marker: {
                fill: {

                },
                border: {
                    weight: 1,

                },
                width: 4,
                height: 4
            }
        },
    }
};

(function() {
    //set canvas as the defaultGraphicEngine
    YUI({
        filter: "raw",
        defaultGraphicEngine: "canvas"
    }).use('charts', function(Y) {
        //var myDataValues = getData(); 
        //style the series
        var myseries = [
            {
            styles: {
                line: {
                    weight: 0.5
                }
            }},
        {
            styles: {
                line: {
                    weight: 1
                }
            }}

        ];

        //instantiate chart with interactionType of planar and groupMarkers set to true
        var myXAxis = new Y.NumericAxis();
        var mychart = new Y.Chart({
            xAxis: myXAxis,
            styles: styleDef,
            interactionType: "planar",
            showLines: false,
            groupMarkers: false,
            dataProvider: myDataValues,
            render: "#mychart",
            seriesCollection: myseries,
            width: 800,
            height: 400,
            categoryType: "numeric",
            categoryKey: "lot",
        });

    });
})();