使用自定义视图对列范围高图中的类别进行分组

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 (eg 30% ) and absolute values in pixels (eg 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/