'column chart color range for negative numbers and different color range for positive

Trying to build a column chart with a range of colors for positive values and another range of colors for negative values.

for example, as much as my value is higher then the color is more "green", I want to add that if the number is less than zero, then as much it is small the color will be more "red".

current situation image

this is my code:

Highcharts.chart('container', {
    colorAxis: [{
            min: 0,
        maxColor: '#1FA37B',
        minColor: '#B6E4D5',
    },{
            max: 0,
        maxColor: '#F0BACC',
        minColor: '#D1315D',
    }],
        xAxis: [{
        categories: [
    "Oct 2021",
    "Nov 2021",
    "Dec 2021",
    "Sep 2021",
    "Aug 2021",
    "Jul 2021",
    "Jun 2021",
    "May 2021",
    "Apr 2021",
    "Mar 2021",
    "Feb 2021",
    "Jan 2021"
  ],
        reversed: false,
        labels: {
            step: 1
        }
    }],
  "series": [
    {
      "data": [[8.00],[18.00],[-8.00],[28.00],[38.00],[-18.00],[ 48.00],[58.00],[-28.00],[68.00],[78.00],[88.00]
      ],
      "type": "column",
      "showInLegend": false
    }
  ],
  "numberSuffix": "%",
  "categoriesFont": "Arial",
  "categoriesFontSize": "12px",
  "yAxisFontSize": "14px",
  "colorByPoint": false,
  "appendWidth": 10,
  "chartData": [{"date": "2021-10-01"},{"date": "2021-11-01"},{"date": "2021-12-01"},{"date": "2021-09-01"},{"date": "2021-08-01"},{"date": "2021-07-01"},{"date": "2021-06-01"},{"date": "2021-05-01"},{"date": "2021-04-01"},{"date": "2021-03-01"},{"date": "2021-02-01"},{"date": "2021-01-01"}]
});

and jsfiddle: https://jsfiddle.net/8569t3dr/1/

highcharts


Solution 1:[1]

Notice that the colorAxis is defined per series, so if you want to have multiple colorAxis (one for positive values, one for negative) you need to split your series into two independent objects.

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

API: https://api.highcharts.com/highcharts/series.line.colorAxis

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sebastian W?dzel

Related Questions