[charts] Support reference areas and dots as chart annotation primitives

[josevsgeon]

Summary

Requesting a Reference Area feature for MUI X charts to allow shading/annotating rectangular regions, in addition to the existing Reference Line. See prior issue #10351 for background.

Reference Area functionality allows the visualization of chart regions (e.g. highlighting time ranges or value intervals) and is distinct from lines or points. This is commonly used to mark events, phases, or thresholds in analytic dashboards. An example is provided here: https://stackblitz.com/edit/j5vodwcm?file=src%2FExample.tsx (see screenshot below). This feature should not be restricted to line charts—reference areas can apply to any supported chart type.

Related reference objects in recharts:

• ReferenceLine
• ReferenceArea
• ReferenceDot

Examples

• Example: https://stackblitz.com/edit/j5vodwcm?file=src%2FExample.tsx

Screenshot:

The example shows a shaded region for "Pre-Launch" versus "Post-Launch". The request is to support referencing areas (along with lines and dots) anywhere on the chart axes.

Prior issue #10351 covered only reference lines.

Motivation

Direct support for ReferenceArea and similar features improves chart readability and is standard in charting libraries (see recharts for examples). Current workaround is manual and inconvenient when compared to built-ins for lines. Full reference support (lines, areas, dots) is requested for completeness.

Search keywords: reference area, reference line, reference dot, chart overlays, axes annotation, recharts ReferenceArea, recharts ReferenceDot, recharts ReferenceLine, chart region

[linear]

X-4660

[alexfauquette]

For those components we might go with components to copy past, because the logic is not that complex, and it will allow users to handle the customization as they want.

For example, placing labels is easy to do when you have a specific use-case. It's painful when you have to build an API and explain it :)

[alexfauquette]

@josevsgeon Here is the preview of the upcoming docs for references https://deploy-preview-21768--material-ui-x.netlify.app/x/react-charts/references/

Would it solve your issue?

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

---

@josevsgeon Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.