[charts] On line chart click

CHANGELOG.md

@@ -3,6 +3,64 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.18.1
+
+_Nov 9, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Fix aggregation label not showing when `renderHeader` is used (#10961) @cherniavskii
+- 📘 Server side data source [early documentation](https://mui.com/x/react-data-grid/server-side-data/) published
+- 📈 `<ChartsReferenceLine />` component is now available
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/[email protected]`
+
+- [DataGrid] Fix cell value type in quick filtering v7 (#10884) @cherniavskii
+- [DataGrid] Fix keyboard navigation for actions cell with disabled buttons (#10947) @michelengelen
+- [DataGrid] Fix `undefined` slot values (#10934) @romgrk
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`, plus:
+
+- [DataGridPro] Add data source interface and basic documentation (#10543) @MBilalShafi
+
+#### `@mui/[email protected]` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/[email protected]`, plus:
+
+- [DataGridPremium] Render aggregation label when `renderHeader` is used (#10961) @cherniavskii
+
+### Date Pickers
+
+#### `@mui/[email protected]`
+
+- [fields] Fix multi input date time field section selection (#10915) @noraleonte
+- [pickers] Always use up-to-date `defaultView` (#10889) @LukasTy
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`.
+
+### Charts / `@mui/[email protected]`
+
+- [charts] Add `<ChartsReferenceLine />` component (#10597) @wascou
+- [charts] Improve properties JSDoc (#10931) @alexfauquette
+
+### Docs
+
+- [docs] Fix charts docs as stable (#10888) @alexfauquette
+- [docs] Document how to hide the legend (#10954) @alexfauquette
+
+### Core
+
+- [core] Adds new alpha version to version select on the docs (#10944) @michelengelen
+- [core] Fix GitHub title tag consistency @oliviertassinari
+
 ## 6.18.0
 
 _Nov 3, 2023_
@@ -357,7 +415,7 @@ Same changes as in `@mui/[email protected]`, plus:
 
 - [core] Fix casing consistency with legal and marketing content @oliviertassinari
 - [core] Revert the link in the priority support ticket description (#10517) @michelengelen
-- [CHANGELOG] Polish image @oliviertassinari
+- [changelog] Polish image @oliviertassinari
 
 ## 6.16.0
 
@@ -1149,7 +1207,7 @@ Same changes as in `@mui/[email protected]`.
 ### Core
 
 - [core] Add `validate` command (#9714) @romgrk
-- [CHANGELOG] Update generator to new format @oliviertassinari
+- [changelog] Update generator to new format @oliviertassinari
 
 ## 6.10.0
 
@@ -1207,7 +1265,7 @@ Same changes as in `@mui/[email protected]`.
 
 - [core] Disambiguate eslint plugin name @oliviertassinari
 - [core] Update priority support issue template and prompt (#9574) @DanailH
-- [CHANGELOG] Clarify each plan (#9446) @oliviertassinari
+- [changelog] Clarify each plan (#9446) @oliviertassinari
 - [license] Fix error terminology (#9614) @oliviertassinari
 
 ## 6.9.2
@@ -1356,8 +1414,8 @@ Same changes as in `@mui/[email protected]`.
 - [core] Fix priority support prompt action (#9472) @DanailH
 - [core] Update `uses` for priority support action (#9480) @DanailH
 - [core] Bumb update monorepo (#9476) @alexfauquette
-- [CHANGELOG] Fix media quality (#9439) @oliviertassinari
-- [CHANGELOG] Remove height img attribute @oliviertassinari
+- [changelog] Fix media quality (#9439) @oliviertassinari
+- [changelog] Remove height img attribute @oliviertassinari
 - [test] Skip flaky row pinning tests in JSDOM (#9511) @cherniavskii
 
 ## 6.9.0

changelogOld/CHANGELOG.v4.md

@@ -1615,7 +1615,7 @@ Big thanks to the 5 contributors who made this release possible. Here are some h
 
 - [docs] Fix imports for x-grid-data-generator (#887) @DanailH
 - [docs] Skip download of playwright for docs @oliviertassinari
-- [CHANGELOG] Polish @oliviertassinari
+- [changelog] Polish @oliviertassinari
 
 ### core
 
@@ -1674,7 +1674,7 @@ Big thanks to the 2 contributors who made this release possible. Here are some h
 
 - [core] Update peer dependencies for React 17 (#814) @DanailH
 - [core] Batch small changes (#800) @oliviertassinari
-- [CHANGELOG] Use the format of the main repository @oliviertassinari
+- [changelog] Use the format of the main repository @oliviertassinari
 
 ## [4.0.0-alpha.14](https://github.com/mui/mui-x/compare/v4.0.0-alpha.13...v4.0.0-alpha.14)
 

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/legend/HiddenLegend.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import { PieChart } from '@mui/x-charts/PieChart';
+
+const series = [
+  {
+    data: [
+      { id: 0, value: 10, label: 'series A' },
+      { id: 1, value: 15, label: 'series B' },
+      { id: 2, value: 20, label: 'series C' },
+    ],
+  },
+];
+
+export default function HiddenLegend() {
+  const [isHidden, setIsHidden] = React.useState(false);
+
+  return (
+    <Stack>
+      <FormControlLabel
+        checked={isHidden}
+        control={
+          <Checkbox onChange={(event) => setIsHidden(event.target.checked)} />
+        }
+        label="hide the legend"
+        labelPlacement="end"
+      />
+      <PieChart
+        series={series}
+        slotProps={{ legend: { hidden: isHidden } }}
+        width={400}
+        height={200}
+      />
+    </Stack>
+  );
+}