CODEWITHSUNDEEP
javascripthighcharts
Ken Hadden
Ken Hadden

Reputation: 186

HighChart Column chart, render portion of column with color from corresponding zone

I am trying to figure out how to render a section of each column in a simple, single series, column chart with multiple colors. Using series.zones:

                series: [
                    {
                        name: "Mod",
                        colorByPoint: true,
                        data: seriesData,
                        zones: [
                            { value: 101, color: '#1D681B' },
                            { value: 121, color: '#ECC518' },
                            { color: '#D50D0D' }
                        ]
                    }
                ]

I can get each column to be a different color based on the zone that the y value is within. In my example above the zone are:

The above works to an extent, but looks like the following:

What I can achieve

However, what my boss wants is something like this:

what my boss wants

Can this be achieved using highcharts?

Upvotes: 0

Views: 190

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

Instead of zones you can use stacked columns. Below is a simple example of how you can automatically calculate series structure:

const steps = [100, 20];
const data = [42, 100, 96, 120, 110, 90, 140];

const series = [{
  color: '#1D681B',
  data: []
}, {
  linkedTo: ':previous',
  color: '#ECC518',
  data: []
}, {
  linkedTo: ':previous',
  color: '#D50D0D',
  data: []
}];

data.forEach((dataEl, i) => {
  let rest = dataEl;
  let counter = 0;
  let value;

  while (rest > 0) {
    value = steps[counter] < rest ? steps[counter] : rest;
    series[counter].data.push({
      x: i,
      y: value
    });
    rest -= value;
    counter++;
  }
});

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  yAxis: {
    reversedStacks: false
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  series
});

Live demo: http://jsfiddle.net/BlackLabel/3h6o0ncg/

Docs: https://www.highcharts.com/docs/advanced-chart-features/stacking-charts

Upvotes: 1

Related Questions