JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.highcharts.com/js/highcharts.js"></script>
<div id="container"></div>
<div id="container2"></div>
JavaScript
var chart;
function createChart(renderTo, A, B, C, categories, title) {
chart = new Highcharts.Chart({
credits: {
enabled: false
},
chart: {
renderTo: renderTo,
defaultSeriesType: 'column'
},
title: {
text: title
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'A number'
},
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [A, B, C]
});
}
$(document).ready(
function() {
createChart('container', {
name: "A",
data: [{
x: 1,
y: 1},
{
x: 2,
y: 1},
{
x: 3,
y: 1},
{
x: 4,
y: 1},
{
x: 8,
y: 1},
{
x: 9,
y: 1},
{
x: 10,
y: 1}],
color: Highcharts.getOptions().colors[0]
}, {
name: "B",
data: [{
x: 5,
y: 1},
{
x: 6,
y: 1},
{
x: 7,
y: 1}],
color: Highcharts.getOptions().colors[1]
}, {
name: "C",
data: [{
x: 0,
y: 1},
{
x: 11,
y: 1}],
color: Highcharts.getOptions().colors[2]
},null,"problem chart");
createChart('container2', {
name: "A",
data: [{
x: 0,
y: 0},
{
x: 1,
y: 1},
{
x: 2,
y: 1},
{
x: 3,
y: 1},
{
x: 4,
y: 1},
{
x: 5,
y: 0},
{
x: 6,
y: 0},
{
x: 7,
y: 0},
{
x: 8,
...