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.

Working jsfiddle URL:https://jsfiddle.net/k1dzcrbj/ – Suresh Negi May 02 '18 at 15:03 — Suresh Negi, May 02 '18 at 15:03

score 1 · Accepted Answer · answered May 04 '18 at 12:04

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/

I have implemented as you suggested below is my url:http://jsfiddle.net/n1sr3ye7/ — Suresh Negi, May 22 '18 at 13:51
As you can see in the above my solution URL text "Global software catalog" is not properly visible and align.Can you help me how this can be fixed — Suresh Negi, May 22 '18 at 13:52
Probably it's caused by using unsupported properties (`width`, `height`, `top`, `left`). This demo has the code in `chart.render` event that forces axes' titles to align: http://jsfiddle.net/BlackLabel/bjm7Lktn/ — Kamil Kulig, May 23 '18 at 12:00

Group Categories in columnrange highcharts with custom view

1 Answers1