CODEWITHSUNDEEP
javascripthighcharts
Hans Rottier
Hans Rottier

Reputation: 122

Heatmap yAxis change does not work as expected

I have a heatmap (see fiddle here and code below) and I want to change the Y-axis by having the user press buttons (see the fiddle). The idea is that you see at most 10 years.

However, when changing the min/max values through the update method of the Y-axis, it starts crossing at the X-axis and you only see half the band of that year (and only half of the highest year) compared to the original view. This contradicts the spec which says all axis options not changed remain the same when setting e.g. the min/max.

So in the start position you see 2008 and 2018 as a whole bar and when you start changing, the top and bottom bars become half.

How to prevent this effect and have the bottom/top years to display at 'full height'?

var thisHeatmap;
function HeatmapPrev() {
  let minValue = thisHeatmap.yAxis[0].min;
  let maxValue = thisHeatmap.yAxis[0].max;
  if (minValue - 10 <= 2008) minValue = 2008;
  else minValue -= 10;
  maxValue = minValue + 10;
  thisHeatmap.yAxis[0].update({min: minValue, max: maxValue}, true);
}

function HeatmapNext() {
  let minValue = thisHeatmap.yAxis[0].min;
  let maxValue = thisHeatmap.yAxis[0].max;
  if (maxValue + 10 >= 2020) maxValue = 2020;
  else maxValue += 10;
  minValue = maxValue - 10;
  thisHeatmap.yAxis[0].update({min: minValue, max: maxValue}, true);
}

thisHeatmap = Highcharts.chart('chartcontainer', {
chart: {type: 'heatmap'},
boost: {useGPUTranslations: true},
xAxis:{
  title: {text: 'Day number'},
  min: 1, max: 366,
},
yAxis:{
  title:{text: 'Years'},
  min: 2008, max: 2018
}, 
data[] }] });

Upvotes: 0

Views: 79

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

The additional padding on y-axis is not added when you update axis extremes. As a solution change by 0.5 calculated extremes and disable properties: startOnTick, endOnTick.

thisHeatmap.yAxis[0].update({
    min: minValue - 0.5,
    max: maxValue + 0.5
}, true);

    yAxis: {
        ...,
        startOnTick: false,
        endOnTick: false
    }

Live demo: https://jsfiddle.net/BlackLabel/cjsmn0re/

API Reference:

https://api.highcharts.com/highcharts/yAxis

https://api.highcharts.com/highcharts/series.heatmap.rowsize

Upvotes: 1

Related Questions