search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.56k stars 1.33k forks source link

[charts] Add data label for line charts & area charts #14605

Open alexbalonperin opened 2 months ago

alexbalonperin commented 2 months ago

Summary

First of all, thank you so much for the great library. Looking at many alternatives, I was quite impressed with the design of the components' interface and how easy it is to create charts with multiple series and multiple axis with their own formatters.

This request is the Line/Area Chart version of https://github.com/mui/mui-x/issues/12331

I have searched through Github issues, the API references and the code but couldn't find a way to show data labels on line & area charts. I apologize in advance if have missed just missed the feature. The closest thing that I found was the LineSeriesType which has a showMark attribute that can be a function accepting ShowMarkParams. This looked promising as ShowMarkParams has the item value but the function returns a boolean.

Please advise if this is possible and if so, some pointer would be very helpful.

Examples

Equivalent in Recharts: Screenshot from 2024-09-12 23-09-39

Motivation

I believe that this is a fairly standard feature of charts and that one that we offer at the moment with ChartJS. However, as we are building more and more complex charts and we already use Material UI for all our components, it makes sense to use MUI/x-charts instead. We need to have at least the same level of feature support as the current version of our application and as far as my research goes, this is the only missing piece in MUI/x-charts.

Search keywords: line chart data label

alexfauquette commented 2 months ago

It looks feasible with the slots.mark sinc e it provides the x, y, coordinate of the circle and the `datatIndex. From those information you will have to retrieve the value you want to display, and then plot the circle and the text.

https://codesandbox.io/p/sandbox/adoring-water-lrzsn3?file=%2Fsrc%2FDemo.tsx%3A55%2C23

image

It works, but might need some refinement

alexbalonperin commented 2 months ago

Nice. Thank you for the quick reply and the sandbox! I'll give it a try. :100:

alexbalonperin commented 2 months ago

Do you think this could become a more standard feature in mui-x similar to barLabel?

alexfauquette commented 2 months ago

Do you think this could become a more standard feature in mui-x similar to barLabel?

I would be more in favor of a useLineMark that would return the needed data and let the user do his own label component

michelengelen commented 2 months ago

@alexfauquette added to the board to track this issue.

alexbalonperin commented 2 months ago

Thank you for your reply. Should I close the issue as resolved since there is a work around and potential enhancement in the future?

alexfauquette commented 2 months ago

Should I close the issue as resolved

No, we keep issues open up until we have a proper fix. This issue will allow us to track we need to improve this aspect of the charts