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

[alexbalonperin]

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 #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:

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]

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

It works, but might need some refinement

[alexbalonperin]

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

[alexbalonperin]

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

[alexfauquette]

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]

@alexfauquette added to the board to track this issue.

[alexbalonperin]

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]

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