[Feature] grouped column labels or grouped categories or data groupings (Hierarchical Data)

[ysk3a]

What problem does this feature solve?

There are multiple issues posted already #18923 #13839 #4902 all with different naming of the feature but all seemed like an issue post rather than a feature request post? (or at least i don't see the new-feature label)

Since my frontend stack is using angular16+, i've been looking for chart library that is performant and support grouping. so far my experience with performance was great 👍but echarts does not appear to have native hierarchy axis support. There are some work around mentioned in the above issue numbers but so far i've experienced odd behavior when adding range slider #13839 (comment)

There are some libraries that seem to support the group column labels/hierarchy/multi category axis feature but i've encountered performance issues for large data sets.
For example, apexchart https://apexcharts.com/javascript-chart-demos/column-charts/column-with-group-label/ has a very simple dev-ex to show grouped/category xaxis data (so easy data manipulation in backend before sending to frontend) but large data makes the app freeze and there is no range slider.

There is also plotly as another example. I'm in the process of trying out https://plotly.com/javascript/axes/#multi-category-axes next and seeing how performant this library will be. But so far, while plotlyjs has some cool feature and some similar to echarts, plotlyjs seems to have some bug(?) with the axis scaling when using the range slider. So far, I have not experienced that bug in echarts 👍 .

so it would be nice if echarts has a native support for hierarchy/multi-category axis that works with range slider.
And hoping that when enabling echarts' datazoom, the datazoom will also handle the positioning of the hierarchy axis as user slides like https://stackblitz.com/edit/js-7ietfq?file=index.js%2Cpackage.json where 'SF Zoo' or 'LA Zoo' x-axis labels repositions to be centered.

i hope that echart will have an official support/feature of grouped categories/hierarchical column data with an official example in the echart demo page soon.

The closest example I could find is
https://echarts.apache.org/examples/en/editor.html?c=mix-zoom-on-value
as it has group columns (e.g. budget 2011 and budget 2012 per tick(?)),
has the zoom/pan bar at the bottom,
almost has a group column label/multi level label/hierarchy data except its not clearly grouped visually like in the examples in the two links mentioned above and I'd like to have option to show dates like time series like grouped label by months.

What does the proposed API look like?

something simple and similar to plotly's or apexchart's example but with echarts zoom slider that show at the bottom of the chart to zoom/pan/select specific areas. (i'm not sure of the official name but I think 'zoom slider' is appropriate. https://echarts.apache.org/examples/en/editor.html?c=mix-zoom-on-value )

e.g.

var trace1 = {
  x: [
    ['SF Zoo','SF Zoo','SF Zoo'],
    ['giraffes', 'orangutans', 'monkeys']
  ],
  y: [20, 14, 23],
  name: 'SF Zoo',
  type: 'bar'
};

var trace2 = {
  x: [
    ['LA Zoo','LA Zoo','LA Zoo'],
    ['giraffes', 'orangutans', 'monkeys']
  ],
  y: [12, 18, 29],
  name: 'LA Zoo',
  type: 'bar'
};

var data = [trace1, trace2];

or

var options = {
  series : [ {
    data : [ 123345.6, 789.11, 12, 13, 14.1516171819, 0 ],
    name : "Cargas Exchange Roll Credit"
  }, {
    data : [ 12.3345, 7.8911, 120, 13000, 0, 14.1516171819 ],
    name : "Cargas Propane Roll Credit"
  } ],
  xaxis : {
    categories : [ "group1", "group2", "group1", "group2", "group1", "group2" ],
    // or
    // categories : [ 
    //   "jan1999", "feb1999", "mar1999", "apr1999", "may1999", "jun1999", //... depending on data 
    // ],

    // and then the grouping category label
    group: {
      groups: [
        { title: '2019', cols: 4 },
        { title: '2020', cols: 4 }
      ]
    }
  }
}