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 a data set
    var dataSet = anychart.data.set([
        ["Jan", 3.8],
        ["Feb", 5.5],
        ["Mar", 9.9],
        ["Apr", 15.7],
        ["May", 21.5],
        ["Jun", 26.3],
        ["Jul", 29.3],
        ["Aug", 28.4],
        ["Sep", 24.4],
        ["Oct", 18.3],
        ["Nov", 12.3],
        ["Dec", 6.6]
    ]);

    // map the data
    var seriesData_1 = dataSet.mapAs({x: [0], value: [1]});

    // set the chart type
    chart = anychart.line();

    // set the interactivity mode
    chart.interactivity().hoverMode("single");

    // create the first series (area), set the data and name
    var series1 = chart.area(seriesData_1);
    series1.name("Average for 20 Years");

    // configure the visual settings of the first series
    series1.fill("#04B4AE", 0.3);
    series1.hoverFill("#04B4AE", 0.5);
    series1.selectFill("#04B4AE", 0.5);
    series1.hatchFill("zigzag", "#808080", 1, 15);
    series1.stroke("#04B4AE");
    series1.hoverStroke("#04B4AE", 4);
    series1.selectStroke("#04B4AE", 4);

    // turn the legend on
    chart.legend(true);

    // set the chart title
    chart.title("Visual Settings");

    // set the titles of the axes
    var xAxis = chart.xAxis();
    xAxis.title("Month");
    var yAxis = chart.yAxis();
    yAxis.title("Temperature, ºC");

    // set the container id
    chart.container("container");
    // initiate drawing the chart
    chart.draw();


    //new data for the chart
    var newData = {
        data: [
            ["Jan", 4.1],
            ["Feb", 5.6],
            ["Mar", 10.4],
            ["Apr", 16.7],
            ["May", 23.5],
            ["Jun", 28.3],
            ["Jul", 32.3],
            ["Aug", 30.4],
            ["Sep", 20.4],
            ["Oct", 16.3],
            ["Nov", 11.3],
            ["Dec", 5.6]
        ],
        fill: "green",
        hoverFill: "#1d5d07",
        selectFill: "#eee900",
        stroke: "#ee7c00",
        hatchFill:...