[charts] Add <ChartsReferenceLine /> component

docs/data/charts-component-api-pages.ts

@@ -9,6 +9,7 @@ export default [
   { pathname: '/x/api/charts/charts-axis', title: 'ChartsAxis' },
   { pathname: '/x/api/charts/charts-axis-highlight', title: 'ChartsAxisHighlight' },
   { pathname: '/x/api/charts/charts-clip-path', title: 'ChartsClipPath' },
+  { pathname: '/x/api/charts/charts-reference-line', title: 'ChartsReferenceLine' },
   { pathname: '/x/api/charts/charts-tooltip', title: 'ChartsTooltip' },
   { pathname: '/x/api/charts/charts-x-axis', title: 'ChartsXAxis' },
   { pathname: '/x/api/charts/charts-y-axis', title: 'ChartsYAxis' },

docs/data/charts/axis/AxisWithComposition.js

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import {
-  ResponsiveChartContainer,
-  BarPlot,
-  LinePlot,
-  ChartsXAxis,
-  ChartsYAxis,
-  axisClasses,
-} from '@mui/x-charts';
+import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+import { LinePlot } from '@mui/x-charts/LineChart';
+import { BarPlot } from '@mui/x-charts/BarChart';
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { axisClasses } from '@mui/x-charts/ChartsAxis';
 
 export default function AxisWithComposition() {
   return (

docs/data/charts/axis/AxisWithComposition.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import {
-  ResponsiveChartContainer,
-  BarPlot,
-  LinePlot,
-  ChartsXAxis,
-  ChartsYAxis,
-  axisClasses,
-} from '@mui/x-charts';
+import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+import { LinePlot } from '@mui/x-charts/LineChart';
+import { BarPlot } from '@mui/x-charts/BarChart';
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { axisClasses } from '@mui/x-charts/ChartsAxis';
 
 export default function AxisWithComposition() {
   return (

docs/data/charts/axis/ReferenceLine.js

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+import { LinePlot } from '@mui/x-charts/LineChart';
+
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
+
+const timeData = [
+  new Date(2023, 7, 31),
+  new Date(2023, 7, 31, 12),
+  new Date(2023, 8, 1),
+  new Date(2023, 8, 1, 12),
+  new Date(2023, 8, 2),
+  new Date(2023, 8, 2, 12),
+  new Date(2023, 8, 3),
+  new Date(2023, 8, 3, 12),
+  new Date(2023, 8, 4),
+];
+
+const y1 = [5, 5, 10, 90, 85, 70, 30, 25, 25];
+const y2 = [90, 85, 70, 25, 23, 40, 45, 40, 50];
+
+const config = {
+  series: [
+    { type: 'line', data: y1 },
+    { type: 'line', data: y2 },
+  ],
+  height: 400,
+  xAxis: [
+    {
+      data: timeData,
+      scaleType: 'time',
+      valueFormatter: (date) =>
+        date.getHours() === 0
+          ? date.toLocaleDateString('fr-FR', {
+              month: '2-digit',
+              day: '2-digit',
+            })
+          : date.toLocaleTimeString('fr-FR', {
+              hour: '2-digit',
+            }),
+    },
+  ],
+};
+
+export default function ReferenceLine() {
+  return (
+    <Box sx={{ width: '100%', maxWidth: 600 }}>
+      <ResponsiveChartContainer {...config}>
+        <LinePlot />
+        <ChartsReferenceLine
+          x={new Date(2023, 8, 2, 9)}
+          lineStyle={{ strokeDasharray: '10 5' }}
+          labelStyle={{ fontSize: '10' }}
+          label={`Wake up\n9AM`}
+          labelAlign="start"
+        />
+        <ChartsReferenceLine y={50} label="Middle value" labelAlign="end" />
+        <ChartsXAxis />
+        <ChartsYAxis />
+      </ResponsiveChartContainer>
+    </Box>
+  );
+}

docs/data/charts/axis/ReferenceLine.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+import { LinePlot } from '@mui/x-charts/LineChart';
+import { LineSeriesType } from '@mui/x-charts/models';
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
+
+const timeData = [
+  new Date(2023, 7, 31),
+  new Date(2023, 7, 31, 12),
+  new Date(2023, 8, 1),
+  new Date(2023, 8, 1, 12),
+  new Date(2023, 8, 2),
+  new Date(2023, 8, 2, 12),
+  new Date(2023, 8, 3),
+  new Date(2023, 8, 3, 12),
+  new Date(2023, 8, 4),
+];
+
+const y1 = [5, 5, 10, 90, 85, 70, 30, 25, 25];
+const y2 = [90, 85, 70, 25, 23, 40, 45, 40, 50];
+
+const config = {
+  series: [
+    { type: 'line', data: y1 },
+    { type: 'line', data: y2 },
+  ] as LineSeriesType[],
+  height: 400,
+  xAxis: [
+    {
+      data: timeData,
+      scaleType: 'time',
+      valueFormatter: (date: Date) =>
+        date.getHours() === 0
+          ? date.toLocaleDateString('fr-FR', {
+              month: '2-digit',
+              day: '2-digit',
+            })
+          : date.toLocaleTimeString('fr-FR', {
+              hour: '2-digit',
+            }),
+    } as const,
+  ],
+};
+
+export default function ReferenceLine() {
+  return (
+    <Box sx={{ width: '100%', maxWidth: 600 }}>
+      <ResponsiveChartContainer {...config}>
+        <LinePlot />
+        <ChartsReferenceLine
+          x={new Date(2023, 8, 2, 9)}
+          lineStyle={{ strokeDasharray: '10 5' }}
+          labelStyle={{ fontSize: '10' }}
+          label={`Wake up\n9AM`}
+          labelAlign="start"
+        />
+        <ChartsReferenceLine y={50} label="Middle value" labelAlign="end" />
+        <ChartsXAxis />
+        <ChartsYAxis />
+      </ResponsiveChartContainer>
+    </Box>
+  );
+}

docs/data/charts/axis/ReferenceLine.tsx.preview

@@ -0,0 +1,13 @@
+<ResponsiveChartContainer {...config}>
+  <LinePlot />
+  <ChartsReferenceLine
+    x={new Date(2023, 8, 2, 9)}
+    lineStyle={{ strokeDasharray: '10 5' }}
+    labelStyle={{ fontSize: '10' }}
+    label={`Wake up\n9AM`}
+    labelAlign="start"
+  />
+  <ChartsReferenceLine y={50} label="Middle value" labelAlign="end" />
+  <ChartsXAxis />
+  <ChartsYAxis />
+</ResponsiveChartContainer>

docs/data/charts/axis/axis.md

@@ -170,3 +170,14 @@ You can choose their position with `position` props which accept `'top'`/`'botto
 Other props are similar to the ones defined in the [previous section](/x/react-charts/axis/#rendering).
 
 {{"demo": "AxisWithComposition.js"}}
+
+### Reference line
+
+The `<ChartsReferenceLine />` component add a reference line to the charts.
+You can provide an `x` or `y` prop to get a vertical or horizontal line respectively at this value.
+
+You can add a `label` to this reference line.
+It can be placed with `labelAlign` prop which accepts `'start'`, `'middle'`, and `'end'` values.
+Elements can be styled with `lineStyle` and `labelStyle` props.
+
+{{"demo": "ReferenceLine.js"}}

docs/data/charts/line-demo/LineChartWithReferenceLines.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { ChartContainer } from '@mui/x-charts/ChartContainer';
+import { ChartsReferenceLine } from '@mui/x-charts';
+import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+
+const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
+const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
+const xLabels = [
+  'Page A',
+  'Page B',
+  'Page C',
+  'Page D',
+  'Page E',
+  'Page F',
+  'Page G',
+];
+
+export default function LineChartWithReferenceLines() {
+  return (
+    <ChartContainer
+      width={500}
+      height={300}
+      series={[
+        { data: pData, label: 'pv', type: 'line' },
+        { data: uData, label: 'uv', type: 'line' },
+      ]}
+      xAxis={[{ scaleType: 'point', data: xLabels }]}
+    >
+      <LinePlot />
+      <MarkPlot />
+      <ChartsReferenceLine
+        x="Page C"
+        label="Max PV PAGE"
+        lineStyle={{ stroke: 'red' }}
+      />
+      <ChartsReferenceLine y={9800} label="Max" lineStyle={{ stroke: 'red' }} />
+      <ChartsXAxis />
+      <ChartsYAxis />
+    </ChartContainer>
+  );
+}

docs/data/charts/line-demo/LineChartWithReferenceLines.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { ChartContainer } from '@mui/x-charts/ChartContainer';
+import { ChartsReferenceLine } from '@mui/x-charts';
+import { LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+
+const uData = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
+const pData = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
+const xLabels = [
+  'Page A',
+  'Page B',
+  'Page C',
+  'Page D',
+  'Page E',
+  'Page F',
+  'Page G',
+];
+
+export default function LineChartWithReferenceLines() {
+  return (
+    <ChartContainer
+      width={500}
+      height={300}
+      series={[
+        { data: pData, label: 'pv', type: 'line' },
+        { data: uData, label: 'uv', type: 'line' },
+      ]}
+      xAxis={[{ scaleType: 'point', data: xLabels }]}
+    >
+      <LinePlot />
+      <MarkPlot />
+      <ChartsReferenceLine
+        x="Page C"
+        label="Max PV PAGE"
+        lineStyle={{ stroke: 'red' }}
+      />
+      <ChartsReferenceLine y={9800} label="Max" lineStyle={{ stroke: 'red' }} />
+      <ChartsXAxis />
+      <ChartsYAxis />
+    </ChartContainer>
+  );
+}

docs/data/charts/line-demo/line-demo.md

@@ -22,6 +22,10 @@ title: Charts - Line demonstration
 
 {{"demo": "BiaxialLineChart.js"}}
 
+## LineChartWithReferenceLines
+
+{{"demo": "LineChartWithReferenceLines.js"}}
+
 ## LineChartConnectNulls
 
 {{"demo": "LineChartConnectNulls.js"}}

docs/pages/x/api/charts/bar-chart.json

@@ -3,7 +3,7 @@
     "bottomAxis": {
       "type": {
         "name": "union",
-        "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'<br>&#124;&nbsp;'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }<br>&#124;&nbsp;string"
+        "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'<br>&#124;&nbsp;'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }<br>&#124;&nbsp;string"
       },
       "default": "xAxisIds[0] The id of the first provided axis"
     },
@@ -13,14 +13,14 @@
     "leftAxis": {
       "type": {
         "name": "union",
-        "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'<br>&#124;&nbsp;'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }<br>&#124;&nbsp;string"
+        "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'<br>&#124;&nbsp;'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }<br>&#124;&nbsp;string"
       },
       "default": "yAxisIds[0] The id of the first provided axis"
     },
     "rightAxis": {
       "type": {
         "name": "union",
-        "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'<br>&#124;&nbsp;'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }<br>&#124;&nbsp;string"
+        "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'<br>&#124;&nbsp;'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }<br>&#124;&nbsp;string"
       },
       "default": "null"
     },
@@ -30,7 +30,7 @@
     "topAxis": {
       "type": {
         "name": "union",
-        "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'<br>&#124;&nbsp;'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }<br>&#124;&nbsp;string"
+        "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'<br>&#124;&nbsp;'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }<br>&#124;&nbsp;string"
       },
       "default": "null"
     }

docs/pages/x/api/charts/charts-axis.json

@@ -3,21 +3,21 @@
     "bottomAxis": {
       "type": {
         "name": "union",
-        "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'<br>&#124;&nbsp;'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }<br>&#124;&nbsp;string"
+        "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'<br>&#124;&nbsp;'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }<br>&#124;&nbsp;string"
       },
       "default": "xAxisIds[0] The id of the first provided axis"
     },
     "leftAxis": {
       "type": {
         "name": "union",
-        "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'<br>&#124;&nbsp;'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }<br>&#124;&nbsp;string"
+        "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'<br>&#124;&nbsp;'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }<br>&#124;&nbsp;string"
       },
       "default": "yAxisIds[0] The id of the first provided axis"
     },
     "rightAxis": {
       "type": {
         "name": "union",
-        "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'<br>&#124;&nbsp;'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }<br>&#124;&nbsp;string"
+        "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'<br>&#124;&nbsp;'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }<br>&#124;&nbsp;string"
       },
       "default": "null"
     },
@@ -26,7 +26,7 @@
     "topAxis": {
       "type": {
         "name": "union",
-        "description": "{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'<br>&#124;&nbsp;'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }<br>&#124;&nbsp;string"
+        "description": "{ axisId?: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'<br>&#124;&nbsp;'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'<br>&#124;&nbsp;array<br>&#124;&nbsp;func, tickLabelInterval?: 'auto'<br>&#124;&nbsp;func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }<br>&#124;&nbsp;string"
       },
       "default": "null"
     }