JSFiddle - React, Tailwind, and code Playground

by Torstein Hønsi

HTML

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

JavaScript

var chart;
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Multiple columns with errorbars'
        },
        credits: {
            enabled: false
        },
        xAxis: [{
            categories: ['2000', '2005', '2010'],
            labels: {
                step: 0
            }
        }],
        yAxis: [{
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            title: {
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            }
        }],
        tooltip: {
            shared: true
        },
        series: [{
            name: 'A',
            type: 'column',
            yAxis: 0,
            data: [0.59, 3.34, 2.25],
            tooltip: {
                pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y} </b><br/>'
            }
        }, {
            name: 'A error',
            type: 'errorbar',
            yAxis: 0,
            showInLegend: true,
            visible: false,
            data: [
                [-0.2, 1.38],
                [0.71, 5.97],
                [0.55, 3.95]
            ],
            tooltip: {
                pointFormat: '({point.low}-{point.high} )<br/>'
            }
        }, {
            name: 'B',
            type: 'column',
            yAxis: 0,
            data: [0.43, 6.16, 8.61],
            tooltip: {
                pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y} </b><br/>'
            }
        }, {
            name: 'B error',
            type: 'errorbar',
            yAxis: 0,
            showInLegend: true,
            visible: false,
            data: [
                [-0.13, 0.99],
                [2.22, 10.1],
 ...