[charts] Add data-series to bar charts#18413
Conversation
|
A bit unsure if I should add a |
bernardobelchior
added
type: enhancement
|
Deploy preview: https://deploy-preview-18413--material-ui-x.netlify.app/ Updated pages: Bundle size reportTotal Size Change: 🔺+1.71KB(+0.01%) - Total Gzip Change: 🔺+359B(+0.01%) Show details for 100 more bundles (22 more not shown)@mui/x-charts parsed: 🔺+440B(+0.16%) gzip: 🔺+114B(+0.14%) |
CodSpeed Performance ReportMerging #18413 will not alter performanceComparing Summary
|
bernardobelchior
force-pushed
the
bar-charts-data-series
branch
from
18c096d to
9bc7286
Compare
Yeah, right now is a bit tricky, because charts behave and are built differently, with the funnel I had to have a |
That will require some update in the data processing, but nothing too drastic. I would be infoavor of testing it. And if no performance draw back, let's go. - return groupIds.flatMap((seriesId) => {
+ return groupIds.map((seriesId) => {If it does not deteriorate performances, why not. The PR does not seems to impact the Also is their a reason to don't add the |
What do you mean? Are you saying that we should also add
No, just forgot. Added it in the most recent commit |
For me it's a nice to have, because the component structure is dependent of the expected visual render. In bar chart we do and not because we want labels to be on top of all rectangles Thand to the mix of data-att and CSS classes we will enable a clear devExp:
|
Added the series ID to the bar label plot as well 👍 |
| { id: 1, data: [4, 3, 5] }, | ||
| { id: 2, data: [1, 6, 3] }, | ||
| { id: 3, data: [2, 5, 6] }, |
There was a problem hiding this comment.
If in v9 we want to move to string we should not demonstrate number in the docs.
| { id: 1, data: [4, 3, 5] }, | |
| { id: 2, data: [1, 6, 3] }, | |
| { id: 3, data: [2, 5, 6] }, | |
| { id: 'id-1', data: [4, 3, 5] }, | |
| { id: 'id-2', data: [1, 6, 3] }, | |
| { id: 'id-3', data: [2, 5, 6] }, |
Can be done in a follow up with other demos doing the same stuff
|
|
||
| You can customize the bar chart elements using CSS selectors. | ||
|
|
||
| Each series renders a `g` element that contains a `data-series` attribute. You can use this attribute to target elements based on their series. |
There was a problem hiding this comment.
| Each series renders a `g` element that contains a `data-series` attribute. You can use this attribute to target elements based on their series. | |
| Each series renders a `g` element that contains a `data-series` attribute. | |
| You can use this attribute to target elements based on their series. |
| 'root', | ||
| 'series', | ||
| 'seriesLabels', |
There was a problem hiding this comment.
Just to share some thaught.
I was considering to propose the following. But it does not work well with classes generation
barClasses.root: removedbarClasses.series:barLabelClasses.seriesGroupbarClasses.seriesLabels:barLabelClasses.seriesGroup
I've open an issue for v9 on this topic #18496
4 participants
Part of #18047.