Group Categories in columnrange highcharts with custom view

Question

I am using highcharts with angular 4.

I want to create a chart to show the result something like this:

Where:

• GHRM and HR Scanner are application name.

• We are showing some data groupwise (application wise here)

To achieve the above result I have tried using columnrange chart type in highcharts.

But the result of above link differs from my requirement. As you can see the result of above link:

Can any one help me to know how I can customize the categories view in this case to achieve the result as shown in first screen shot.

Answer 1

Getting that kind of look with grouped categories plugin would be a rather a hard task to accomplish.

Another approach is using a separate x axis for each set of categories (GHRM and HR Scanner in your case).

Axes can be positioned via left & top properties and sized via height properties. These options are not documented yet but they work. They accept relative values in percents (e.g. 30%) and absolute values in pixels (e.g. 200px).

  xAxis: [{
    categories: ['Category 1'],
    tickWidth: 0,
    height: '30%',
    offset: 0,
    title: {
      text: 'First x axis',
      rotation: 0,
      align: 'high'
    }
  }, {
    categories: ['Category 2', 'Category 3'],
    tickWidth: 0,
    height: '60%',
    top: '40%',
    offset: 0,
    title: {
      align: 'high',
      text: 'Second x axis',
      rotation: 0
    }
  }],

  plotOptions: {
    series: {
      grouping: false,
      groupPadding: 0,
      pointPadding: 0,
      borderWidth: 0
    }
  },

  series: [{
    data: [
      [1, 7]
    ],
  }, {
    data: [
      [2, 4],
      [3, 8]
    ],
    xAxis: 1
  }]

Live demo: http://jsfiddle.net/BlackLabel/s3k3s944/

grouping has to be disabled so that columns are always centered. pointPadding, groupPadding and borederWidth force columns to occupy maximum vertical range.

All other options of axes configuration can be found in the Highcharts API: https://api.highcharts.com/highcharts/