JSFiddle - React, Tailwind, and code Playground

S. Schluricke

by Tenobaal

HTML

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

<div id="chart1" style="height: 400px; margin-top: 1em"></div>

CSS

#chart1 {
	max-width: 800px;
	margin: 0 auto;
  background-color: #1B4152;
}

JavaScript

xArr = [ -12, -11, -10, -9, -8, -7, -6, -5, -4, -3, -1, 0, 1, 2, 3]
yArr = [ 0.15, 0.06, 0.07, 0.28, 0.43, 0.01, 0, 0, 0, 0, 0 ,0 ]

highchartsHistogram = function(xArr, yArr, title, xName, xUnit, yName, color, chart_container) {

    var series = [];
    for (var i = 0; i < xArr.length; i++) {
        var point = {
            x: xArr[i],
            y: yArr[i],
        }
        series.push(point);
    }

    var options = {
        chart: {
            renderTo: chart_container,
            type: 'column',
            backgroundColor: null,
            style: {
                fontFamily: 'Fira Sans'
            },

        },
        title: {
            text: title,
            style: {
                fontSize: '24px',
                color: 'white'
            },
        },
        xAxis: {
        		title: {
            	enabled: false,
            },
            labels: {
                formatter: function () {
                    return this.value + ' ' + xUnit;
                },
                style: {
                    fontSize: '20px',
                    color: 'white',
                },
            },
        },
        yAxis: {
            title: {
                enabled: false,
            },
            labels: {
							enabled: false
            },
        },
        tooltip: {
            headerFormat: xName + ' = {point.x} ' + xUnit + '<br>',
            pointFormat:  yName + ' = {point.name} <br> {point.y}'
		    },
        legend: {
            enabled: false
        },
        plotOptions: {
            column: {
                pointPadding: 0,
                borderWidth: 0,
                groupPadding: 0.1,

                shadow: false,
            },
        },

        series: [{
            color: color,
            data: series,
            dataLabels: {
                enabled: true,
                format: '{point.y} %',
                style: {
                  fontSize: '20px',
                  color: 'white',
      ...