JSFiddle - React, Tailwind, and code Playground
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: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
var dataArray = [{
ErrorDate: "2017-09-07",
Brand: "Toyota",
Count: 3
}, {
ErrorDate: "2017-09-02",
Brand: "Ford",
Count: 258
}, {
ErrorDate: "2017-09-03",
Brand: "Ford",
Count: 239
}, {
ErrorDate: "2017-09-04",
Brand: "Ford",
Count: 197
}, {
ErrorDate: "2017-09-05",
Brand: "Ford",
Count: 187
}, {
ErrorDate: "2017-09-06",
Brand: "Ford",
Count: 418
}, {
ErrorDate: "2017-09-07",
Brand: "Ford",
Count: 344
}, {
ErrorDate: "2017-09-03",
Brand: "Mercedes",
Count: 43
}, {
ErrorDate: "2017-09-04",
Brand: "Mercedes",
Count: 220
}, {
ErrorDate: "2017-09-03",
Brand: "Chrysler",
Count: 3
}, {
ErrorDate: "2017-09-04",
Brand: "Chrysler",
Count: 3
}, {
ErrorDate: "2017-09-06",
Brand: "Chrysler",
Count: 6
}, {
ErrorDate: "2017-09-07",
Brand: "Chrysler",
Count: 1
}];
var chart = Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Car Metrix Test'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Count'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>'
},
plotOptions: {
spline: {
marker: {
enabled: true
},
pointInterval: 24 * 3600 * 1000
}
},
series: []
});
var seriesArr = [];
dataArray.forEach(function(point) {
var newPoint = [point.ErrorDate, point.Count],
seriesIndex = seriesArr.findIndex((series) => series.name === point.Brand);
if (seriesIndex === -1) {
seriesArr.push({
name: point.Brand,
data: [newPoint]
});
} else {
seriesArr[seriesIndex].data.push(newPoint);
}
});
seriesArr.forEach(function(series) {
chart.addSeries(series);
});