I need to design the same below image chart example in Highchart.js which is built in excel. Can anyone please help me to develop this in highcharts.js only like the below image?

Image Preview

I already have implemented it in a similar way. But I need this in a different group of colors and combinations in the same chart. -

    `https://jsfiddle.net/shwetapandey/rwmxoka5`

CodePudding user response：

I suggest to add new series, with different xAxis, series.columnrange.xAxis. To styling you have options to adjust like xAxis.left and xAxis.top.

  chart: {
    type: 'columnrange',
  },
  xAxis: [{
    width: '33%',
    offset: 0,
  }, {
    left: '50%',
    width: '33%',
    offset: 0,
  }],
  plotOptions: {
    xAxis: {
      labels: {
        enabled: true
      }
    },
    columnrange: {
      grouping: false,
      dataLabels: {
        enabled: true,
      }
    }
  },
  series: [{
      name: 'Joe',
      color: '#E5DDE3',
      data: [
        [-5, 5],
        [-10, 10],
        [-13, 13],
        [-16, 16],
        [-19, 19]
      ]
    },
    {
      name: 'Jane',
      color: '#BEA9BA',
      data: [
        [-3.5, 3.5],
        [-6, 6],
        [-7, 7],
        [-9, 9],
        [-12, 12]
      ]
    },
    {
      color: '#A5879E',
      name: 'John',
      data: [
        [-1.5, 1.5],
        [-2, 2],
        [-3, 3],
        [-4, 4],
        [-5, 5]
      ]
    },
    {
      name: 'Joe1',
      color: '#FFA500',
      xAxis: 1,
      data: [
        [-5, 5],
        [-10, 10],
        [-13, 13],
        [-16, 16],
        [-19, 19]
      ].reverse()
    },
    {
      name: 'Jane1',
      color: '#FFA500',
      xAxis: 1,
      data: [
        [-3.5, 3.5],
        [-6, 6],
        [-7, 7],
        [-9, 9],
        [-12, 12]
      ]
    },
    {
      color: '#FFA500',
      name: 'John1',
      xAxis: 1,
      data: [
        [-1.5, 1.5],
        [-2, 2],
        [-3, 3],
        [-4, 4],
        [-5, 5]
      ]
    }
  ]

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

To control each series you need to write a custom legend control, for this you can use legend.labelFormatter, that give you callback function to format each of the series' labels.

EDIT ------

To control many group series I used callback function events.legendItemClick builded in series events. They give way to manage series at legend in that case I compare name of series and index of items to hide and show group of series with custom legend.

  events: {
    legendItemClick: function() {
      let name = this.name.substring(this.name.length - 1, this.name.length);

      let _i = this._i;
      this.chart.series.forEach(function(p, i) {
        console.log('p: ', p, 'i: ', i);
        if (name === p.name.substring(p.name.length - 1, p.name.length) && _i !== p._i) {
          (!p.visible) ? p.show(): p.hide()
        }
      })
    }
  }

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