JSFiddle - React, Tailwind, and code Playground

by Sajeetharan Sinnathurai

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<pre id="csv" style="display:none">
  Date,Series1,Series2,Series3
2016-11-01,51133.8941,5709.6097,22837.8403
2016-11-02,50507.2502,5639.6387,22557.9634
2016-11-03,50967.3341,5644.3896,22576.977
2016-11-04,51310.3385,5663.6562,22654.0417
2016-11-05,51310.3385,5663.6562,22654.0417
2016-11-06,51310.3385,5663.6562,22654.0417
2016-11-07,52434.202,5787.7087,23150.239
2016-11-08,52607.4831,5806.8356,23226.7444
2016-11-09,53741.9039,5932.0534,23727.6028
2016-11-10,54068.759,5968.1318,23871.9127
2016-11-11,54068.759,5968.1318,23871.9127
2016-11-12,54068.759,5968.1318,23871.9127
2016-11-13,54068.759,5968.1318,23871.9127
2016-11-14,55476.6901,6123.5396,24493.53
2016-11-15,55483.3455,6124.2742,24496.4684
2016-11-16,55552.7511,6131.9353,24527.1117
2016-11-17,56104.0877,6147.0583,24587.6056
2016-11-18,56088.9295,6126.8777,24506.8854
  
</pre>

JavaScript

$(function () {
    Highcharts.chart('container', {

        title: {
            text: 'Global temperature change'
        },

        subtitle: {
            text: 'Data input from CSV'
        },

        data: {
            csv: document.getElementById('csv').innerHTML
        },

        plotOptions: {
            series: {
                marker: {
                    enabled: false
                }
            }
        },

        series: [{
            lineWidth: 1
        }, {
            type: 'areaspline',
            color: '#c4392d',
            negativeColor: '#5679c4',
            fillOpacity: 0.5
        }]
    });
});