JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    var chart;
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar'
            },
            title: {
                text: 'Monthly Average Rainfall'
            },
            series: [{
                name: 'Tokyo',
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

            }]
        }, function (chart) {

            var i = 0,
                avg,
                yAxis = chart.yAxis[0],
                r = chart.renderer,
                tickWidth = chart.plotWidth / chart.series[0].data.length,
                startX = chart.plotLeft,
                len = chart.series[0].data.length,
                seriesCount = chart.series.length;
console.log(`coordinates: plot left top: ${chart.plotLeft}, ${chart.plotTop}/
${chart.plotwidth}, ${chart.plotheight}`)


            for (i = 0; i < len; i++) {
            
            console.log('chart data', chart.series);
                avg = 0;
                $.each(chart.series, function (j, serie) {
                    avg += serie.data[i].y;
                });
                avg = Math.floor(avg / seriesCount);

								/* r.path(['M', chart.plotLeft, chart.plotTop, 'L', chart.plotLeft+chart.plotWidth, chart.plotTop+chart.plotHeight]).attr({
                    'stroke-width': 2,
                    stroke: 'blue'
                }).add();
						*/
                r.path(['M', startX, chart.plotHeight -  yAxis.translate(avg), 'L', startX + tickWidth, chart.plotHeight - yAxis.translate(avg)])
                    .attr({
                    'stroke-width': 2,
                    stroke: 'red'
                })
                    .add();
                startX = startX + tickWidth;
            }

        });
    });

});