echarts
echarts copied to clipboard
apache
Separate legend icons and labels for each data point in a single bar chart, similar to a pie chart.
What problem does this feature solve?
"For a pie chart in a single series case, each data point has a separate legend. When we toggle a legend, that data point is removed from the pie chart. We would like a similar feature for the bar chart. Currently, one series is associated with one legend in the bar chart."
What does the proposed API look like?
"Currently, in a single bar series case, we only see one legend, but we have a requirement to show legends for each data point."
Pie Chart Link : https://echarts.apache.org/examples/en/editor.html?c=bar-simple&code=G4QwTgBAxg9gNjMBnCBeCBtA5GApgEywBosAjOAV12KwHM9cA7GgBwEtGBrLAXQCg-MFgBc2MRmggBvARAhJcYNriQAuTHzlyZWrYxABbXBFVYFSlQEZim3bvwhhIdRlt3pEUJVzrLABgAWAA4iCH0jdSwAWXEsCABfIjc7KU8Qb3UAdgBmAFZQ8J8ILAAVKjjE5N1Uryp1XKC_AsMirAB1Agqk9200jIhggOaI4pKACwouqogebt1p4QBPFlb2ajndNmFcAwBlJbginR65WAQwdQgAChZwQwBKVAA-aWn3PGEKMAloeEQkDC3MCGAB0DicAElGPhcAAPHgAbjeWniyNRunRMzmtkOtCY-FUGGOciQYxgAHcTMIwFQNhBbJVbPx4gigA
Bar Chart Link: https://echarts.apache.org/examples/en/editor.html?c=bar-simple&code=G4QwTgBAxg9gNjMBnCBeCBtA5GApgEywBosAjOAV12KwHM9cA7GgBwEtGBrLAXQCg-MFgBc2MRmggBvPhAgAPAILy2SAFzTZciMICeLXBqxQQw3LUS7iWuflMgN2ALLjiELABUqbrAHUCPh4AFhS8WgC-RFq6yqoaMto6-obuoJTUEVFySLhgbLjqmDaaiXKMIAC2uBBqWDl5BQCM1qUQdsIOmI0ATAAMRBB9_RCNAKzDABy9PFmlegZGpOAtpWxmFQDKenApCa3asAhgGhAAFCzglQCUqAB8JfuJeMIUYBLQ8IhIGBdglQB07RAAElGPhcPIeABuYqtcKw7TwxJIiAzLRaHa0Jj4NQYPbZIIwADuNWEYCoszkmS0-IgSEJJLUZIpNh2ADNhDVehAIlp-OEoUA
You can use the stack property and set the values for all other categories to 0. Here is an example.
"Thanks for your quick response. Regarding the workaround suggested, adding extra series and providing datasets at each series level will significantly impact the design of our application charts. Do we have any other workaround? Because for each bar, we would again need to create a series."
In MS Excel, when the bar colors are the same, only one legend icon is displayed. However, when the bar colors are different, multiple legends are shown for each bar.
case 1 :
"In this case, bars are plotted, and since all bar colors are the same, only one legend is displayed." (Only single series is present )
case 2:
"When we enable 'vary colors by point,' Excel automatically displays multiple legends for each bar as all the bar colors vary to indicate the distinction.(Only single series is present )
In Both cases Single series is present
To my knowledge echarts creates one legend entry per series and there is no way around.
If the work around I provided is not suitable for your use case you can always implement your own legend component activating / deactivating data points of your series.
"Thank you for your response. I appreciate your efforts in providing a workaround. However, I'm having difficulty understanding the implementation details. Could you please provide more clarity or perhaps share a code snippet/example to illustrate your suggestion? I'm relatively new to this, and any additional guidance would be immensely helpful."
"We implemented the suggested approach, creating a series for each bar to display legends. We have utilized the stack property and set the values for all other categories to null. As part of the performance improvement, we only feed data with nulls up until the series index when multiple series are provided. To the right, there is no need for any additional data."
The Below Image is the workaround Solution for showing legends for each bar as suggested by "[MatthiasMert]"
The Below Image is a performance Improvement to the workaround Done By us (performance improvement approach)
"We have applied the workaround along with our "performance improvement approach" in our main application. However, even after implementing this workaround with our "performance improvement approach", we are still facing performance issues with 500, 1000, and 2000 records. Despite following this approach, we continue to encounter very serious performance issues."
Samples : Normal Bar chart with 1000 Records without Any workaround (It is Rendering Very Fast) https://codesandbox.io/p/sandbox/bar-chart-1k-rec-without-performance-issue-hfjfn2
Bar chart with 1000 Records with workaround along with our performance improvement approach (It is Rendering Very Slow) https://codesandbox.io/p/sandbox/bar-chart-1k-rec-performance-issue-sample-4gx2qv
"Our expectation is to render charts more efficiently while displaying legends. Can you please provide any efficient solutions without impacting performance?"