Highcharts tree map showing wrong min value

Question

My highcharts tree map is showing 0 as the minimum value instead of 1. Here's the fiddle.

$('#container').highcharts({
    colorAxis: {
    minColor: '#0000FF',
    maxColor: "#ff0000",
    min: 1,
    max: 10/*,
    tickInterval: 1*/
  },
  series: [{
    type: 'treemap',
    layoutAlgorithm: 'squarified',
    data: [{
      name: '1',
      value: 1,
      colorValue: 1
    }, {
      name: '2',
      value: 1,
      colorValue: 2
    }, {
      name: '3',
      value: 1,
      colorValue: 3
    }, {
      name: '4',
      value: 1,
      colorValue: 4
    }, {
      name: '5',
      value: 1,
      colorValue: 5
    }, {
      name: '6',
      value: 1,
      colorValue: 6
    }, {
      name: '7',
      value: 1,
      colorValue: 7
    }, {
      name: '8',
      value: 1,
      colorValue: 8
    }, {
      name: '9',
      value: 1,
      colorValue: 9
    }, {
      name: '10',
      value: 1,
      colorValue: 10
    }]
  }]
});

You can see I have explicitly set the minimum value to 1, maximum to 10, and 0 does not appear in the series. It works correctly if you uncomment the tickInterval, but I do not want ticks for every value in my legend.

How could I modify that so that 1 is #0000ff, 10 is #ff0000, and I have a tick at 1, 5, and 10 in my legend?

Answer 1

When using min and max for colorAxis these values may be rounded due to startOnTick and endOnTick defaulting to true.

Setting the specific tick positions will solve this problem, using tickPositions array or tickPositioner function. For example (JSFiddle):

colorAxis: {
    tickPositions: [1,5,10],
    min: 1,
    max: 10
    // ...
}