RajendraLad
Posts: 10
Joined: Thu Aug 17, 2023 9:22 am

Highchart heatmap color issue

Hi Am trying to plot heamap . It plots chart but showing only white color .
and there are 33 assets but showing only 18.
I have created example [https://jsfiddle.net/Rajlad/m5a7x3te/5/]

original code
Highcharts.chart('inverterAvailability', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Inverter Availability'
},
xAxis: {
type: 'datetime',

},
yAxis: {
categories: heatmapData.map((item) => item.name),
title: {
text: 'Asset ID'
}
},
colorAxis: {
stops: [
[0.1, '#dceff5'],
[0.3, '#87abd6'],
[0.5, '#5c81b5'],
[0.6, '#5470b3'],
[0.9, '#2843b8'],
[1, '#0f11a6']
]
},
series: heatmapData.map((dataset) => ({
type: 'heatmap',
// borderWidth: 1,
data: dataset.data.map((point) => ([
Date.parse(point[0]),
heatmapData.findIndex(item => item.name === dataset.name),
point[2] !== null ? point[2] / 100 : null,
])),
dataLabels: {
enabled: true,
color: '#000000'
}
})),
});

Please reply.
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Highchart heatmap color issue

We appreciate you reaching out to us!

You need to use series.colsize and series.rowsize to set the proper size of the cells, see:

Demo: https://jsfiddle.net/BlackLabel/5y8kcsph/

Or you can use category axis instead of datetime, see:

Demo: https://jsfiddle.net/BlackLabel/uc72vkfj/

I hope you find it useful
Kind regards
Jakub
RajendraLad
Posts: 10
Joined: Thu Aug 17, 2023 9:22 am

Re: Highchart heatmap color issue

Thank you so much. It is working now.
If I have to swap the x-axis to the y-axis what should I do?
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: Highchart heatmap color issue

Hi!

Apologies for a delayed response time. In order to swap the axes, you can simply enable the chart.inverted property inside your config.

Demo: https://jsfiddle.net/BlackLabel/exmg5zbr/

API: https://api.highcharts.com/highcharts/chart.inverted

In case of any other questions, feel free to ask anytime.
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Usage”