CODEWITHSUNDEEP
javascripthighcharts
stramin
stramin

Reputation: 2400

Set series color based on X axis on a column Highchart

I am trying to build a Higchart and color its columns based on its x axis, for example, in this chart, columns are red if x is below 10 and green if is over 20, otherwise is yellow

enter image description here

Actually I am setting every column color to get this result, and I would like to avoid it and use conditions.

Is there any way to do it?

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Column chart'
  },
  plotOptions: {
    column:{
    	colorByPoint: true,
      colors: [
      '#F00','#F00','#F00','#F00','#F00','#F00','#F00','#F00','#F00','#F00',
      '#FF0','#FF0','#FF0','#FF0','#FF0','#FF0','#FF0','#FF0','#FF0','#FF0',
      '#0F0','#0F0','#0F0','#0F0','#0F0','#0F0','#0F0','#0F0','#0F0','#0F0'
      ]
    }
  },
  series: [{
    name: 'Val',
    data: [
      [ 1,5],
      [ 2,3],
      [ 3,4],
      [ 4,7],
      [ 5,2],
      [ 6,4],
      [ 7,2],
      [ 8,3],
      [ 9,6],
      [10,5],
      [11,3],
      [12,4],
      [13,7],
      [14,2],
      [15,4],
      [16,2],
      [17,3],
      [18,6],
      [19,5],
      [20,3],
      [21,4],
      [22,7],
      [23,2],
      [24,4],
      [25,2],
      [26,3],
      [27,1],
      [28,7],
      [29,6],
      [30,2]
    ]
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Upvotes: 1

Views: 1426

Answers (1)

Ashu
Ashu

Reputation: 2266

An array defining zones within a series. Zones can be applied to the X axis, Y axis or Z axis for bubbles, according to the zoneAxis option. The zone definitions have to be in ascending order regarding to the value.

So you can use :

plotOptions.series.zones

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Column chart'
  },
  plotOptions: {
    column:{
    	colorByPoint: true,
      
    }
  },
  series: [{
    zoneAxis: 'x',
    zones: [{
            value: 10,
            color: '#f7a35c'
        }, {
            value: 20,
            color: '#7cb5ec'
        }, {
            color: '#90ed7d'
        }],
    data: [
      [ 1,5],
      [ 2,3],
      [ 3,4],
      [ 4,7],
      [ 5,2],
      [ 6,4],
      [ 7,2],
      [ 8,3],
      [ 9,6],
      [10,5],
      [11,3],
      [12,4],
      [13,7],
      [14,2],
      [15,4],
      [16,2],
      [17,3],
      [18,6],
      [19,5],
      [20,3],
      [21,4],
      [22,7],
      [23,2],
      [24,4],
      [25,2],
      [26,3],
      [27,1],
      [28,7],
      [29,6],
      [30,2]
    ]
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

API Reference: https://api.highcharts.com/highcharts/plotOptions.series.zones

Upvotes: 3

Related Questions