JSFiddle - React, Tailwind, and code Playground

by samwhite

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Basic line chart showing trends in a dataset. This chart includes the
        <code>series-label</code> module, which adds a label to each line for
        enhanced readability.
    </p>
</figure>

JavaScript

Highcharts.chart('container', {
chart: {
    type: 'line',
    zoomType: 'x'
},
title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
},

subtitle: {
    text: 'Source: thesolarfoundation.com'
},

yAxis: {
    title: {
        text: 'Inflation'
    }
},

xAxis: {
    type: 'datetime',
},

legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
},
tooltip: {
    enabled: true,
    valueDecimals: 2
},

series: [{
    name: 'Inflation',
    data: [{"x": -694310400000.0, "y": 0.10242085661080069}, {"x": -691632000000.0, "y": 0.09481961147086038}, {"x": -689126400000.0, "y": 0.06818181818181812}, {"x": -686448000000.0, "y": 0.08272727272727276}, {"x": -683856000000.0, "y": 0.09384965831435088}, {"x": -681177600000.0, "y": 0.09375}, {"x": -678585600000.0, "y": 0.09761583445793964}, {"x": -675907200000.0, "y": 0.09062499999999996}, {"x": -673228800000.0, "y": 0.06654991243432562}, {"x": -670636800000.0, "y": 0.061108686163247494}, {"x": -667958400000.0, "y": 0.047701647875108444}, {"x": -665366400000.0, "y": 0.02733874412644166}, {"x": -662688000000.0, "y": 0.013935810810810967}, {"x": -660009600000.0, "y": 0.010139416983523386}, {"x": -657590400000.0, "y": 0.01744680851063829}, {"x": -654912000000.0, "y": 0.004198152812762368}, {"x": -652320000000.0, "y": -0.004164931278633932}, {"x": -649641600000.0, "y": -0.009523809523809379}, {"x": -647049600000.0, "y": -0.02868852459016391}, {"x": -644371200000.0, "y": -0.02988129349160873}, {"x": -641692800000.0, "y": -0.02504105090311981}, {"x": -639100800000.0, "y": -0.026326614561908546}, {"x": -636422400000.0, "y": -0.019039735099337762}, {"x": -633830400000.0, "y": -0.018295218295218296}, {"x": -631152000000.0, "y": -0.02082465639316955}, {"x": -628473600000.0, "y": -0.012547051442910906}, {"x": -626054400000.0, "y": -0.01129234629861986}, {"x": -623376000000.0, "y": -0.011287625418060276}, {"x": -620784000000.0, "y": -0.0058552906733584376}, {"x": -618105600000.0, "y":...