JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>


<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">

    </p>
</figure>

CSS

* {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}

.highcharts-figure {
    margin: 0;
}

#container {
    height: 400px;
    min-width: 310px;
}

JavaScript

(async () => {
    // Create the chart
    Highcharts.stockChart('container', {
        
        yAxis: {
            opposite: false,
            labels: {
                align: 'left',
                x: 0
            }
        },

        legend: {
            enabled: true
        },
plotOptions: {
        series: {
            pointStart: '2015-01-01',
            pointIntervalUnit: 'year'
        }
    },
        responsive: {
            rules: [{
                condition: {
                    minWidth: 1200
                },
                chartOptions: {
                    legend: {
                        align: 'right',
                        layout: 'proximate',
                        labelFormat: '{name} <b>({lastValue} EUR)</b>'
                    }
                }
            }]
        },

        series: [{
            name: 'amount',
            data: [200,170,150, 100, 50],
            step: true
        },
        {
            name: 'amount',
            data: [300,270,220, 150, 100],
            step: true
        }]
    });
})();