[charts] New HTML legend & styles

docs/data/charts/bars/BarGapNoSnap.js

@@ -35,7 +35,6 @@ export default function BarGapNoSnap() {
         <BarChart
           dataset={balanceSheet}
           series={series}
-          width={500}
           height={300}
           margin={{ top: 15 }}
           xAxis={[

docs/data/charts/bars/BarsDataset.js

@@ -11,6 +11,7 @@ const chartSetting = {
   ],
   width: 500,
   height: 300,
+  margin: { left: 60 },
   sx: {
     [`.${axisClasses.left} .${axisClasses.label}`]: {
       transform: 'translate(-20px, 0)',

docs/data/charts/bars/BarsDataset.tsx

@@ -11,6 +11,7 @@ const chartSetting = {
   ],
   width: 500,
   height: 300,
+  margin: { left: 60 },
   sx: {
     [`.${axisClasses.left} .${axisClasses.label}`]: {
       transform: 'translate(-20px, 0)',

docs/data/charts/bars/BorderRadius.js

@@ -77,9 +77,8 @@ const chartSettingsH = {
   },
   slotProps: {
     legend: {
-      direction: 'row',
+      direction: 'horizontal',
       position: { vertical: 'bottom', horizontal: 'middle' },
-      padding: -5,
     },
   },
 };

docs/data/charts/bars/BorderRadius.tsx

@@ -79,9 +79,8 @@ const chartSettingsH: Partial<BarChartProps> = {
   },
   slotProps: {
     legend: {
-      direction: 'row',
+      direction: 'horizontal',
       position: { vertical: 'bottom', horizontal: 'middle' },
-      padding: -5,
     },
   },
 };

docs/data/charts/bars/StackBars.js

@@ -16,9 +16,14 @@ export default function StackBars() {
         { dataKey: 'treas', stack: 'equity' },
       ])}
       xAxis={[{ scaleType: 'band', dataKey: 'year' }]}
-      hideLegend
-      width={600}
-      height={350}
+      {...config}
     />
   );
 }
+
+const config = {
+  width: 600,
+  height: 350,
+  margin: { left: 70 },
+  hideLegend: true,
+};

docs/data/charts/bars/StackBars.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BarChart } from '@mui/x-charts/BarChart';
+import { BarChart, BarChartProps } from '@mui/x-charts/BarChart';
 import { addLabels, balanceSheet } from './netflixsBalanceSheet';
 
 export default function StackBars() {
@@ -16,9 +16,14 @@ export default function StackBars() {
         { dataKey: 'treas', stack: 'equity' },
       ])}
       xAxis={[{ scaleType: 'band', dataKey: 'year' }]}
-      hideLegend
-      width={600}
-      height={350}
+      {...config}
     />
   );
 }
+
+const config: Partial<BarChartProps> = {
+  width: 600,
+  height: 350,
+  margin: { left: 70 },
+  hideLegend: true,
+};

docs/data/charts/bars/StackBars.tsx.preview

@@ -10,7 +10,5 @@
     { dataKey: 'treas', stack: 'equity' },
   ])}
   xAxis={[{ scaleType: 'band', dataKey: 'year' }]}
-  hideLegend
-  width={600}
-  height={350}
+  {...config}
 />

docs/data/charts/components/HtmlLegend.js

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { unstable_useBarSeries } from '@mui/x-charts/hooks';
+import { useLegend } from '@mui/x-charts/hooks';
 import { ChartDataProvider } from '@mui/x-charts/context';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { BarPlot } from '@mui/x-charts/BarChart';
 import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
 import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
 
 function MyCustomLegend() {
-  const s = unstable_useBarSeries();
+  const { items } = useLegend();
   return (
     <table
       style={{
@@ -17,7 +17,7 @@ function MyCustomLegend() {
       }}
     >
       <tbody>
-        {Object.values(s?.series ?? []).map((v) => {
+        {items.map((v) => {
           return (
             <tr key={v.id}>
               <td aria-hidden>

docs/data/charts/components/HtmlLegend.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { unstable_useBarSeries } from '@mui/x-charts/hooks';
+import { useLegend } from '@mui/x-charts/hooks';
 import { ChartDataProvider } from '@mui/x-charts/context';
 import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
 import { BarPlot } from '@mui/x-charts/BarChart';
 import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
 import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
 
 function MyCustomLegend() {
-  const s = unstable_useBarSeries();
+  const { items } = useLegend();
   return (
     <table
       style={{
@@ -17,7 +17,7 @@ function MyCustomLegend() {
       }}
     >
       <tbody>
-        {Object.values(s?.series ?? []).map((v) => {
+        {items.map((v) => {
           return (
             <tr key={v.id}>
               <td aria-hidden>

docs/data/charts/components/components.md

@@ -83,15 +83,15 @@ With the introduction of the `ChartDataProvider` in v8, the chart data can be ac
 This allows you to create HTML components that interact with the charts data.
 
 In the next example, notice that `MyCustomLegend` component displays the series names and colors.
-This creates an html `table` element, which handles long series names better than the default legend.
+This creates an html `table` element, which can be customized in any way.
 
 {{"demo": "HtmlLegend.js"}}
 
 :::warning
 Note that the HTML components are not part of the SVG hierarchy.
 Hence, they should be:
 
-- Outside the `<ChartsSurface />` component to avoid mixing HTAM and SVG.
+- Outside the `<ChartsSurface />` component to avoid mixing HTML and SVG.
 - Inside the `<ChartDataProvider />` component to get access to the data.
 
 :::

docs/data/charts/heatmap/ColorConfig.js

@@ -107,6 +107,7 @@ export default function ColorConfig() {
       xAxis={[{ data: xData }]}
       yAxis={[{ data: yData }]}
       series={[{ data }]}
+      margin={{ left: 70 }}
       zAxis={[
         {
           min: 20,

docs/data/charts/heatmap/ColorConfig.tsx

@@ -110,6 +110,7 @@ export default function ColorConfig() {
       xAxis={[{ data: xData }]}
       yAxis={[{ data: yData }]}
       series={[{ data }]}
+      margin={{ left: 70 }}
       zAxis={[
         {
           min: 20,

docs/data/charts/label/PieLabel.js

@@ -21,6 +21,6 @@ export default function PieLabel() {
 }
 
 const props = {
-  width: 500,
+  width: 200,
   height: 200,
 };

docs/data/charts/label/PieLabel.tsx

@@ -21,6 +21,6 @@ export default function PieLabel() {
 }
 
 const props = {
-  width: 500,
+  width: 200,
   height: 200,
 };

docs/data/charts/legend/BasicColorLegend.js

@@ -3,11 +3,12 @@ import Typography from '@mui/material/Typography';
 import { LineChart } from '@mui/x-charts/LineChart';
 import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
 import { PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend';
+import Stack from '@mui/material/Stack';
 import { dataset } from './tempAnomaly';
 
 export default function BasicColorLegend() {
   return (
-    <div style={{ width: '100%' }}>
+    <Stack width={'100%'}>
       <Typography variant="body1">
         Global temperature anomaly relative to 1961-1990 average
       </Typography>
@@ -43,16 +44,19 @@ export default function BasicColorLegend() {
         ]}
         grid={{ horizontal: true }}
         height={300}
-        margin={{ top: 30, right: 150 }}
-        hideLegend
+        margin={{ top: 20, right: 20 }}
+        slotProps={{
+          legend: {
+            axisDirection: 'x',
+            direction: 'vertical',
+          },
+        }}
+        slots={{
+          legend: PiecewiseColorLegend,
+        }}
       >
-        <PiecewiseColorLegend
-          axisDirection="x"
-          position={{ vertical: 'top', horizontal: 'right' }}
-          direction="column"
-        />
         <ChartsReferenceLine y={0} />
       </LineChart>
-    </div>
+    </Stack>
   );
 }

docs/data/charts/legend/BasicColorLegend.tsx

@@ -3,11 +3,12 @@ import Typography from '@mui/material/Typography';
 import { LineChart } from '@mui/x-charts/LineChart';
 import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
 import { PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend';
+import Stack from '@mui/material/Stack';
 import { dataset } from './tempAnomaly';
 
 export default function BasicColorLegend() {
   return (
-    <div style={{ width: '100%' }}>
+    <Stack width={'100%'}>
       <Typography variant="body1">
         Global temperature anomaly relative to 1961-1990 average
       </Typography>
@@ -43,16 +44,19 @@ export default function BasicColorLegend() {
         ]}
         grid={{ horizontal: true }}
         height={300}
-        margin={{ top: 30, right: 150 }}
-        hideLegend
+        margin={{ top: 20, right: 20 }}
+        slotProps={{
+          legend: {
+            axisDirection: 'x',
+            direction: 'vertical',
+          },
+        }}
+        slots={{
+          legend: PiecewiseColorLegend,
+        }}
       >
-        <PiecewiseColorLegend
-          axisDirection="x"
-          position={{ vertical: 'top', horizontal: 'right' }}
-          direction="column"
-        />
         <ChartsReferenceLine y={0} />
       </LineChart>
-    </div>
+    </Stack>
   );
 }