Allow emphasizing portion of values

[stefda]

What problem does this feature solve?

I am implementing a charting framework that should support interactivity between charts. For example, if a user selects (clicks) a specific value on a bar chart, the action should result in that value being emphasized, and any other chart on a dashboard that relies on a series that is itself based on the selected value (though the value might be groupped/displayed differently), should empahsise the corresponding portion of the series.

The image below shows two charts, a bar chart and a pie chart, that both rely on a series of values. The bar charts displays the values stacked by category against months, the pie chart sums the categories and shows a percentage total.

Selecting a specific value on the bar chart should emphasize that bar component, as well as emphasize the corresponding portion of the series on the pie.

This should work when multiple values are selected also, as shown below.

Note: It sholud work analogously on a bar chart.

Edit: I'm not expecting echarts to support this kind of interactivity out of the box, but IMO it would be desirable to allow highlighting/emphasizing a portion of values to allow the implemention of it.

What does the proposed API look like?

let options = {
  ...
  series: [
    {
      data: [100, 50, 50],
      emphasizedData: [15, 0, 0], // New: This is the data that will be emphasized against the original data above
    }
  ]
}

[helgasoft]

wow, heavy, what high-end charting library was used for the demo pics?

[stefda]

That's Microsoft's Power BI.

I consider echarts one of the best (if not the best) charting libraries available. Keen to help bring this feature to life, if there's interest. I just fear that it will be too big an intervention and before I get my hands dirty, I'd like to hear from someone from the core maintainers regarding the direction of my idea and align on a reasonable api.

[helgasoft]

I hope core maintainers are listening and will reply. Currently you can (almost) get # 1 - Demo Code. For pie presentations take a look at this demo.