CODEWITHSUNDEEP
reactjshighcharts
Vivek Raghav
Vivek Raghav

Reputation: 15

Highchart Treemap colorindex for fixed color values

i am working Treemap by highcharts using color index : 

        {
          reversed: false,
          type: "algorithmic",
          min: 0,
          max: 15,
          ordinal: false,
          startOnTick: false,
          endOnTick: true,
          stops: [
            [0, "#B20800"],
            [0.25, "#FFFFFF"],
            [0.8, "#1F57B0"],
            [1, "#800080"]
          ],
          tickPositions: [0, 1, 2, 3, 15],
        }
      ],

Output scale:

Output Scale Required Scale:

Required Scale

but with above code its getting up need to fix ranges and its color 0-1 red to white 1-3 white to blue 3-15 blue to purple after 15 fixed purple

this what I want achieve but using stops it's not working.

Upvotes: 1

Views: 139

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

You can mock the color axis labels:

colorAxis: {
  ...,
  labels: {
    formatter: function() {
      if (this.value === 4) {
        return 15;
      }
      return this.value;
    }
  },
  stops: [
    [0, "#B20800"],
    [0.25, "#FFFFFF"],
    [0.8, "#1F57B0"],
    [1, "#800080"]
  ],
  tickPositions: [0, 1, 2, 3, 4]
}

And calculate color for points with value higher than 3:

chart: {
  events: {
    load: function() {
      var colorAxis = this.colorAxis[0],
        calculatedVal;

      this.series[0].points.forEach(function(p) {
        if (p.y > 3) {
          calculatedVal = (p.y - 3) / (15 - 3);

          p.update({
            color: colorAxis.toColor(3 + calculatedVal)
          });
        }
      });
    }
  }
}

Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4924/

Upvotes: 1

Related Questions