JSFiddle - React, Tailwind, and code Playground

by Shestac92

HTML

<script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css">
<div id="container"></div>

CSS

html, body, #container {
            width: 100%;
            height: 300px;
            margin: 0;
            padding: 0;
        }

JavaScript

anychart.onDocumentReady(function () {
    //set data
    var data = anychart.data.set([
        ['IL', '2010', 5599869585, NaN, NaN],
        ['IL', '2012', 5174706679, NaN, NaN],
        ['IL', '2011', 3565106294, NaN, NaN],
        ['IL', '2009', 1984176544, NaN, NaN],
        ['IL', '2013', 1799519564, NaN, NaN],
        ['CA', '2012', NaN, 2959600884, NaN],
        ['CA', '2009', NaN, 1976341028, NaN],
        ['CA', '2011', NaN, 1783337897, NaN],
        ['CA', '2010', NaN, 1582503018, NaN],
        ['CA', '2013', NaN, 884240573, NaN],
        ['PA', '2010', NaN, NaN, 876892984],
        ['PA', '2013', NaN, NaN, 537348605],
        ['PA', '2011', NaN, NaN, 535873503],
        ['PA', '2009', NaN, NaN, 86508026],
        ['PA', '2012', NaN, NaN, 50295470]
    ]);

    //create a chart
    chart = anychart.cartesian();
    
    // set series type
    chart.defaultSeriesType("column");

		// add series
    chart.addSeries(data.mapAs({'value': 2, 'p2': 1}))
    chart.addSeries(data.mapAs({'value': 3}))
    chart.addSeries(data.mapAs({'value': 4}));
    // set names
    chart.getSeries(0).name("IL");
    chart.getSeries(1).name("CA");
    chart.getSeries(2).name("PA")

    //set horizontal grids
    chart.grid(0).enabled(true);
    chart.minorGrid(0).enabled(true);

    //adjust Y-scale appearance
    chart.yScale().stackMode('values');
    
    //format Y-scale text labels
    var yLabels = chart.yAxis().labels();
    yLabels.format(function () {
        var value = this.value;
        value = Math.round(value / 1000000000).toFixed(3);
        return value + 'B';
    }); 
    
    //set Y-scale title
    chart.yAxis().title("Spend");

    //adjust X-scale
    chart.xScale().names('p2');
    chart.xAxis(0).ticks(false);

    //create another one X-scale
    var scale2 = anychart.scales.linear();
    scale2.minimum(0);
    scale2.maximum(3);
    scale2.ticks().interval(1);

    //set X-scale text labels appearance
    var xLabels1 = chart.xAxis(0).labels();
   ...