CODEWITHSUNDEEP
javascripthighchartsheatmapaxis
Nataly Firstova
Nataly Firstova

Reputation: 821

Highcharts heatmap with custom colors for each yAxis

I'm trying to create a heatmap with 3 yAxis categories (manager, robot, both) and I need to color data with different ways, for example: maximum value for the manager - is green, minimum - is red, and opposite for robot, maximum - is red, minimum - is green. I'm tried to use colorAxis.dataClasses but it's works only for range not for axis.

My code (does not work)

$(function () {

$('#container').highcharts({

    chart: {
        type: 'heatmap',
        marginTop: 40,
        marginBottom: 80
    },

    title: {
        text: 'Heatmap'
    },

    xAxis: {
        categories: ['01-01-2019', '02-01-2019', '03-01-2019', '04-01-2019', '05-01-2019', '06-01-2019', '07-01-2019', '08-01-2019', '09-01-2019', '10-01-2019']
    },

    yAxis: {
        categories: ['Bot', 'Manager', 'Both'],
        title: null
    },
    colorAxis: [
      {
        minColor: '#ff0000',
        maxColor: '#00ff45'
      }, 
      {
        minColor: '#00ff45',
        maxColor: '#ff0000',
      },
      {
        minColor: '#ffe700',
        maxColor: '#6300ff',
      },
    ],
    legend: {
                    align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'top',
        y: 25
    },

    series: [{
        name: 'Sales per unit',
        borderWidth: 1,
        data: [[0, 0, 17], [0, 1, 9], [0, 2, 16], [1, 0, 10], [1, 1, 10], [1, 2, 21], [2, 0, 23], [2, 1, 28], [2, 2, 8], [3, 0, 23], [3, 1, 18], [3, 2, 26], [4, 0, 2], [4, 1, 28], [4, 2, 23], [5, 0, 16], [5, 1, 24], [5, 2, 18], [6, 0, 12], [6, 1, 19], [6, 2, 12], [7, 0, 3], [7, 1, 29], [7, 2, 14], [8, 0, 24], [8, 1, 10], [8, 2, 5], [9, 0, 21], [9, 1, 28], [9, 2, 2]],
        dataLabels: {
            enabled: true,
            color: '#000000'
        }
    }]

});

});

Image for example enter image description here

How I can achieve this result?

Upvotes: 0

Views: 1704

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

You need to split your data into 3 series and assign them to a colorAxis:

series: [{
  data: [
    ...
  ],

}, {
  colorAxis: 1,
  data: [
    ...
  ]
}, {
  colorAxis: 2,
  data: [
    ...
  ]
}]

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

API Reference: https://api.highcharts.com/highcharts/series.heatmap.colorAxis

Upvotes: 2

Related Questions