CODEWITHSUNDEEP
javascripthighcharts
Cezar Cobuz
Cezar Cobuz

Reputation: 1217

Highcharts - Segmented column bar

How can I achieve segmented columns using highcharts like in the photo bellow: segmented columns I have tried using column stacked and format my data in series of 1 but this is very counterintuitive and can't make it work. Is there any builtin option that I can use?

Upvotes: 0

Views: 63

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

I think that this demo will be a good start for you to create a chart as in the shared image.

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

  series: [{
    stacking: 'normal',
    color: 'rgb(100,100,200)',
    data: [
      [0, 1],
      [0, 1],
      [0, 1],
      [0, 1],
      [0, 1],
      [0, 1],
      [0, 1],
      [0, 1],
      [0, 1],
      [0, 1],
      [0, 1],
      [0, 1]
    ],
    grouping: false,
    borderWidth: 4,
    borderColor: 'rgb(30,30,70.1)'
  }, {
    stacking: 'normal',
    stack: 'b',
    grouping: false,
    color: 'rgb(200,100,200)',
    data: [
      [0, 1],
      [0, 1],
      [0, 1],
      [0, 1],
      [0, 1],
      [0, 1],
      [0, 1],
      [0, 1],
      [0, 1]
    ],
    borderWidth: 4,
    borderColor: 'rgb(30,30,70, 1)'
  }, {
    stacking: 'normal',
    color: 'rgb(100,100,200)',
    data: [
      [1, 1],
      [1, 1],
      [1, 1],
      [1, 1],
      [1, 1],
      [1, 1],
      [1, 1],
      [1, 1],
      [1, 1],
      [1, 1],
      [1, 1],
      [1, 1]
    ],
    grouping: false,
    borderWidth: 4,
    borderColor: 'rgb(30,30,70.1)'
  }, {
    stacking: 'normal',
    stack: 'b',
    grouping: false,
    color: 'rgb(200,100,200)',
    data: [
      [1, 1],
      [1, 1],
      [1, 1],
      [1, 1],
      [1, 1],
      [1, 1],
    ],
    borderWidth: 4,
    borderColor: 'rgb(30,30,70, 1)'
  }]

EDIT

I also found other useful examples:

More you can find under searching for the "Highcharts equalizer chart".

Upvotes: 1

Related Questions