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 data
    var data = [
        ['Jan', 242, 162, {fill: 'gold'}],
        ['Feb', 254, 90, {fill: 'red'}],
        ['Mar', 226, 50, {fill: 'green'}],
        ['Apr', 232, 77, {fill: 'blue'}],
        ['May', 268, 35, {fill: 'yellow'}],
        ['Jun', 254, -45, {fill: 'black'}],
        ['Jul', 235, -88, {fill: 'orange'}],
        ['Aug', 266, -120, {fill: 'violet'}],
        ['Sep', 288, -156, {fill: 'pink'}],
        ['Oct', 220, -123, {fill: 'olive'}],
        ['Nov', 215, -88, {fill: 'brown'}],
        ['Dec', 236, -66, {fill: 'gray'}, {enabled : "true", fontSize : 20}]
    ];

// create line chart
    chart = anychart.line();

// turn on chart animation
    chart.animation(true);

    chart.container('container');

//map dataset for the first series, append to the spline chart
    var dataSet0 = anychart.data.set(data).mapAs({"x": [0], "value": [1], "marker": [3], "label" : 4});
    var series0 = chart.spline(dataSet0);

//set type of markers and enable them
    series0.markers().type("circle");
    series0.markers().enabled(true);

//map dataset for the second series, append to the spline chart
    var dataSet1 = anychart.data.set(data).mapAs({"x": [0], "value": [2], "label" : 4});
    var series1 = chart.spline(dataSet1);

// initiate chart drawing
    chart.draw();
});