Grouped Categories

[ghost]

What problem does this feature solve?

I'm changing plots on my websites from Highcharts to Echarts.
I want a feature for grouped categories similar like this: http://blacklabel.github.io/grouped_categories/.
If anyone can help? Thanks in advance.

What does the proposed API look like?

Provide grouped categories

[helgasoft]

use second (grouping) X-axis
Demo Code

[ysk3a]

Hi,
it seems that demo code is not responsive and 'breaks' once the dimension of parent changes like when resizing the browser. The smaller the chart container is the labels just disappear.

i'm also looking for a performant chart library that has grouped categories like blacklabel's plugin but highchart+grouped_categories is very buggy when using with angular.

[helgasoft]

The smaller the chart container is the labels just disappear.

interval for axisLabel was not set, Try now with new Demo Code

[ysk3a]

• I think, i'll need some time with the echarts api. thanks for sharing! I'll check out the interval attribute.

• at this point i'm being nitpicky but on very narrow chart container the labels disappear still. 😛 (i don't think anyone will view a chart that narrow anyways)
  would be a nice-to-have feature if echarts could natively handle this to change orientation of labels in addition ellipsis(in the scenario where labels are very long) depending on size of container like
  

[ggregoire]

@helgasoft Hi, I'm using your solution and it works great with an odd number of columns (e.g. 3 columns), the label is perfectly centered with the column in the middle.

Do you have a solution for an even number of columns (e.g. 4 columns)? I tried by adding some hardcoded paddings to center it between the second and third columns, but it won't be centered if your monitor resolution is different than mine.

Here I updated your demo if you want to take a look at the problem.

Thanks.

[helgasoft]

@ggregoire, nice try with the demo, but it is still not responsive (on size changes).
I do not think centering is doable for even number of columns. 😓
Take a look at the demo in #19250 - a more complex, but maybe better solution.
EDIT: centering and responsiveness is doable