JSFiddle - React, Tailwind, and code Playground

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,
linkedTo: null,
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,
linkedTo: null,
visible: false,
data: [[-0.13,0.99], [2.22,10.1], [2.4,14.82]],
tooltip: {
pointFormat: '({point.low}-{point.high} )<br/>'
}
},
{ 
name: 'C',
type: 'column',
yAxis: 0,
data: [ 1.54, 0.43, 0.2 ], 
tooltip: {
pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y} </b><br/>'
}},
{
name: 'C error',
type: 'errorbar',
yAxis: 0,
linkedTo: null,
visible: false,
data: [[0.56,2.52], [0.22,0.64], [0.11,0.29]],
tooltip: {
pointFormat: '({point.low}-{point.high} )<br/>'
}
},
{ 
name: 'D',
type: 'column',
yAxis: 0,
data: [ [null,null], 0.42, 0.29 ], 
tooltip: {
pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y} </b><br/>'
}},
{
name: 'D error',
type: 'errorbar',
yAxis: 0,
linkedTo: null,
visible: false,
data: [[null,null], [0.23,0.61], [0.15,0.43]],
tooltip: {
pointFormat:...