I have a question on how to solve this little problem i have.
I'm trying to show a interval between timestamps in the categories array
So i want it to show the interval 07:00 - 08:00 in the tooltip instead of the single 07:00 and so on.
But still keeping categories as they are.
My code looks like this. Using typescript and getting my data from SQL
Code: Select all
private async initPcsPackedChart() {
Highcharts.chart(document.getElementById('pcsPackedChart')!, <Highcharts.Options>{
chart: {
type: 'column',
backgroundColor: '#FCFCFC'
},
title: {
text: 'Pcs. packed per hour',
style: {
color: '#333',
}
},
xAxis: {
categories: [
'00:00',
'01:00',
'02:00',
'03:00',
'04:00',
'05:00',
'06:00',
'07:00',
'08:00',
'09:00',
'10:00',
'11:00',
'12:00',
'13:00',
'14:00',
'15:00',
'16:00',
'17:00',
'18:00',
'19:00',
'20:00',
'21:00',
'22:00',
'23:00'
],
labels: {
style: {
color: '#333',
}
}
},
yAxis: {
min: 0,
title: {
text: 'Pcs.'
},
labels: {
style: {
color: '#333',
}
}
},
legend: {
itemStyle: {
color: '#333'
},
itemHoverStyle: {
color: '#000'
}
},
navigation: {
buttonOptions: {
enabled: false
}
},
tooltip: {
headerFormat: '<span style="font-weight:bold;font-size:10px; color:#333">{point.key}</span><table>',
pointFormat: '<tr><td style="font-weight:bold;color:{series.color};padding-right:5px">{series.name}: </td>' +
'<td style="padding:0; color:#333;"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true,
backgroundColor: '#fff'
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Pcs. packed',
data: this.getPackedPerHour(),
color: '#163535'
}],
})
};