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: 100%;
            margin: 0;
            padding: 0;
        }

JavaScript

anychart.onDocumentReady(function() {

    // create stage for all charts
    stage = acgraph.create('container');

    // data
    var data2 = anychart.data.set([
        [2005, 8000],
        [2006, 12000],
        [2007, 21000],
        [2008, 19000],
        [2009, 17000],
        [2010, 19000],
        [2011, 23000],
        [2012, 18000],
        [2013, 12000],
        [2014, 7000]
    ]);

    // create a data set
    var data1 = anychart.data.set([
        ["Facebook", 20000, 10000, 20000],
        ["Instagram", 20000, 15000, 60000],
        ["Twitter", 40000, 30000, 10000],
        ["Youtube", 20000, 12000, 40000]
    ]);

    // map the data
    var seriesData_1 = data1.mapAs({x: [0], value: [1]});
    var seriesData_2 = data1.mapAs({x: [0], value: [2]});
    var seriesData_3 = data1.mapAs({x: [0], value: [3]});

    // create a chart1
    chart1 = anychart.bar();

    // enable the percent stacking mode
    chart1.yScale().stackMode("value");

    // create area series, set the data
    var series1 = chart1.bar(seriesData_1);
    var series2 = chart1.bar(seriesData_2);
    var series3 = chart1.bar(seriesData_3);

    // set the chart1 title
    chart1.title("Stacked Bar Chart");

    // chart2 type
    chart2 = anychart.line(data2);

    // set y scale ticks interval
    var yScale = chart2.yScale();
    yScale.minimum(0);
    yScale.maximum(25000);

    // set red marker
    var rangeMarker = chart2.rangeMarker(0);
    rangeMarker.axis(chart2.yAxis());
    rangeMarker.fill("#ffa000 0.4");
    rangeMarker.from(10000);
    rangeMarker.to(20000);

    var lineMarker1 = chart2.lineMarker(0);
    lineMarker1.value(10000);
    lineMarker1.stroke({
        thickness: 4,
        color: "#0D0",
        dash: "8 4"
    });

    var lineMarker2 = chart2.lineMarker(1);
    lineMarker2.value(20000);
    lineMarker2.stroke({
        thickness: 4,
        color: "#0D0",
        dash: "8 4"
    });

    // draw
    chart1.bounds(0, 0, '100%', '50%');
   ...