[charts] Create color legend

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

@@ -89,6 +89,10 @@ const apiPages: MuiPage[] = [
     pathname: '/x/api/charts/charts-y-axis',
     title: 'ChartsYAxis',
   },
+  {
+    pathname: '/x/api/charts/continuous-color-legend',
+    title: 'ContinuousColorLegend',
+  },
   {
     pathname: '/x/api/charts/default-charts-axis-tooltip-content',
     title: 'DefaultChartsAxisTooltipContent',
@@ -153,6 +157,10 @@ const apiPages: MuiPage[] = [
     pathname: '/x/api/charts/pie-arc-plot',
     title: 'PieArcPlot',
   },
+  {
+    pathname: '/x/api/charts/piecewise-color-legend',
+    title: 'PiecewiseColorLegend',
+  },
   {
     pathname: '/x/api/charts/pie-chart',
     title: 'PieChart',

docs/data/charts/legend/BasicColorLegend.js

@@ -0,0 +1,58 @@
+import * as React from 'react';
+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 { dataset } from './tempAnomaly';
+
+export default function BasicColorLegend() {
+  return (
+    <div style={{ width: '100%' }}>
+      <Typography variant="body1">
+        Global temperature anomaly relative to 1961-1990 average
+      </Typography>
+      <LineChart
+        dataset={dataset}
+        series={[
+          {
+            label: 'Global temperature anomaly relative to 1961-1990',
+            dataKey: 'anomaly',
+            showMark: false,
+            valueFormatter: (value) => `${value?.toFixed(2)}°`,
+          },
+        ]}
+        xAxis={[
+          {
+            scaleType: 'time',
+            dataKey: 'year',
+            disableLine: true,
+            valueFormatter: (value) => value.getFullYear().toString(),
+            colorMap: {
+              type: 'piecewise',
+              thresholds: [new Date(1961, 0, 1), new Date(1990, 0, 1)],
+              colors: ['blue', 'gray', 'red'],
+            },
+          },
+        ]}
+        yAxis={[
+          {
+            disableLine: true,
+            disableTicks: true,
+            valueFormatter: (value) => `${value}°`,
+          },
+        ]}
+        grid={{ horizontal: true }}
+        height={300}
+        margin={{ top: 30, right: 150 }}
+        slotProps={{ legend: { hidden: true } }}
+      >
+        <PiecewiseColorLegend
+          axisDirection="x"
+          position={{ vertical: 'top', horizontal: 'right' }}
+          direction="column"
+        />
+        <ChartsReferenceLine y={0} />
+      </LineChart>
+    </div>
+  );
+}

docs/data/charts/legend/BasicColorLegend.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+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 { dataset } from './tempAnomaly';
+
+export default function BasicColorLegend() {
+  return (
+    <div style={{ width: '100%' }}>
+      <Typography variant="body1">
+        Global temperature anomaly relative to 1961-1990 average
+      </Typography>
+      <LineChart
+        dataset={dataset}
+        series={[
+          {
+            label: 'Global temperature anomaly relative to 1961-1990',
+            dataKey: 'anomaly',
+            showMark: false,
+            valueFormatter: (value) => `${value?.toFixed(2)}°`,
+          },
+        ]}
+        xAxis={[
+          {
+            scaleType: 'time',
+            dataKey: 'year',
+            disableLine: true,
+            valueFormatter: (value) => value.getFullYear().toString(),
+            colorMap: {
+              type: 'piecewise',
+              thresholds: [new Date(1961, 0, 1), new Date(1990, 0, 1)],
+              colors: ['blue', 'gray', 'red'],
+            },
+          },
+        ]}
+        yAxis={[
+          {
+            disableLine: true,
+            disableTicks: true,
+            valueFormatter: (value) => `${value}°`,
+          },
+        ]}
+        grid={{ horizontal: true }}
+        height={300}
+        margin={{ top: 30, right: 150 }}
+        slotProps={{ legend: { hidden: true } }}
+      >
+        <PiecewiseColorLegend
+          axisDirection="x"
+          position={{ vertical: 'top', horizontal: 'right' }}
+          direction="column"
+        />
+        <ChartsReferenceLine y={0} />
+      </LineChart>
+    </div>
+  );
+}

docs/data/charts/legend/ContinuousInteractiveDemoNoSnap.js

@@ -0,0 +1,135 @@
+import * as React from 'react';
+import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
+import { interpolateRdYlBu } from 'd3-scale-chromatic';
+import { LineChart } from '@mui/x-charts/LineChart';
+import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
+import { ContinuousColorLegend } from '@mui/x-charts/ChartsLegend';
+import { dataset } from './tempAnomaly';
+
+export default function ContinuousInteractiveDemoNoSnap() {
+  return (
+    <ChartsUsageDemo
+      componentName="Legend"
+      data={[
+        {
+          propName: 'direction',
+          knob: 'select',
+          defaultValue: 'row',
+          options: ['row', 'column'],
+        },
+        {
+          propName: 'length',
+          knob: 'number',
+          defaultValue: 50,
+          min: 10,
+          max: 80,
+        },
+        {
+          propName: 'thickness',
+          knob: 'number',
+          defaultValue: 5,
+          min: 1,
+          max: 20,
+        },
+        {
+          propName: 'align',
+          knob: 'select',
+          defaultValue: 'middle',
+          options: ['start', 'middle', 'end'],
+        },
+        {
+          propName: 'fontSize',
+          knob: 'number',
+          defaultValue: 10,
+          min: 8,
+          max: 20,
+        },
+      ]}
+      renderDemo={(props) => (
+        <div style={{ width: '100%' }}>
+          <LineChart
+            dataset={dataset}
+            series={[
+              {
+                label: 'Global temperature anomaly relative to 1961-1990',
+                dataKey: 'anomaly',
+                showMark: false,
+                valueFormatter: (value) => `${value?.toFixed(2)}°`,
+              },
+            ]}
+            xAxis={[
+              {
+                scaleType: 'time',
+                dataKey: 'year',
+                disableLine: true,
+                valueFormatter: (value) => value.getFullYear().toString(),
+              },
+            ]}
+            yAxis={[
+              {
+                disableLine: true,
+                disableTicks: true,
+                valueFormatter: (value) => `${value}°`,
+                colorMap: {
+                  type: 'continuous',
+                  min: -0.5,
+                  max: 1.5,
+                  color: (t) => interpolateRdYlBu(1 - t),
+                },
+              },
+            ]}
+            grid={{ horizontal: true }}
+            height={300}
+            margin={{
+              top: props.direction === 'row' ? 50 : 20,
+              right: props.direction === 'row' ? 20 : 50,
+            }}
+            slotProps={{ legend: { hidden: true } }}
+          >
+            <ChartsReferenceLine y={0} />
+            <ContinuousColorLegend
+              axisDirection="y"
+              position={
+                props.direction === 'row'
+                  ? { vertical: 'top', horizontal: 'middle' }
+                  : { vertical: 'middle', horizontal: 'right' }
+              }
+              direction={props.direction}
+              length={`${props.length}%`}
+              thickness={props.thickness}
+              align={props.align}
+              labelStyle={{ fontSize: props.fontSize }}
+            />
+          </LineChart>
+        </div>
+      )}
+      getCode={({ props }) => {
+        return [
+          `import { LineChart } from '@mui/x-charts/LineChart';`,
+          `import { ContinuousColorLegend } from '@mui/x-charts/ChartsLegend';`,
+          '',
+          `<LineChart`,
+          `  margin={{ top: ${props.direction === 'row' ? 50 : 20}, right: ${
+            props.direction === 'row' ? 20 : 50
+          } }}`,
+          '  {/** ... */}',
+          '>',
+          `  <ContinuousColorLegend`,
+          `      axisDirection="x"`,
+          `      position={${
+            props.direction === 'row'
+              ? `{ vertical: 'top', horizontal: 'middle' }`
+              : `{ vertical: 'middle', horizontal: 'right' }`
+          }}`,
+          `      direction="${props.direction}"`,
+          `      length="${props.length}%"`,
+          `      thickness={${props.thickness}}`,
+          `      align="${props.align}"`,
+          `      labelStyle={{ fontSize: ${props.fontSize} }}`,
+          `    />`,
+          '</LineChart>',
+        ].join('\n');
+      }}
+    />
+  );
+}

docs/data/charts/legend/PiecewiseInteractiveDemoNoSnap.js

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
+import { LineChart } from '@mui/x-charts/LineChart';
+import { PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend';
+import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
+import { dataset } from './tempAnomaly';
+
+export default function PiecewiseInteractiveDemoNoSnap() {
+  return (
+    <ChartsUsageDemo
+      componentName="Legend"
+      data={[
+        {
+          propName: 'hideFirst',
+          knob: 'switch',
+        },
+        {
+          propName: 'direction',
+          knob: 'select',
+          defaultValue: 'row',
+          options: ['row', 'column'],
+        },
+        {
+          propName: 'padding',
+          knob: 'number',
+          defaultValue: 0,
+        },
+        {
+          propName: 'fontSize',
+          knob: 'number',
+          defaultValue: 10,
+          min: 8,
+          max: 20,
+        },
+      ]}
+      renderDemo={(props) => (
+        <div style={{ width: '100%' }}>
+          <LineChart
+            dataset={dataset}
+            series={[
+              {
+                label: 'Global temperature anomaly relative to 1961-1990',
+                dataKey: 'anomaly',
+                showMark: false,
+                valueFormatter: (value) => `${value?.toFixed(2)}°`,
+              },
+            ]}
+            xAxis={[
+              {
+                scaleType: 'time',
+                dataKey: 'year',
+                disableLine: true,
+                valueFormatter: (value) => value.getFullYear().toString(),
+                colorMap: {
+                  type: 'piecewise',
+                  thresholds: [new Date(1961, 0, 1), new Date(1990, 0, 1)],
+                  colors: ['blue', 'gray', 'red'],
+                },
+              },
+            ]}
+            yAxis={[
+              {
+                disableLine: true,
+                disableTicks: true,
+                valueFormatter: (value) => `${value}°`,
+              },
+            ]}
+            grid={{ horizontal: true }}
+            height={300}
+            margin={{
+              top: props.direction === 'row' ? 50 : 20,
+              right: props.direction === 'row' ? 20 : 150,
+            }}
+            slotProps={{ legend: { hidden: true } }}
+          >
+            <ChartsReferenceLine y={0} />
+            <PiecewiseColorLegend
+              axisDirection="x"
+              position={
+                props.direction === 'row'
+                  ? { vertical: 'top', horizontal: 'middle' }
+                  : { vertical: 'middle', horizontal: 'right' }
+              }
+              direction={props.direction}
+              padding={props.padding}
+              labelStyle={{ fontSize: props.fontSize }}
+              hideFirst={props.hideFirst}
+            />
+          </LineChart>
+        </div>
+      )}
+      getCode={({ props }) => {
+        return [
+          `import { LineChart } from '@mui/x-charts/LineChart';`,
+          `import { PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend';`,
+          '',
+          `<LineChart`,
+          `  margin={{ top: ${props.direction === 'row' ? 50 : 20}, right: ${
+            props.direction === 'row' ? 20 : 150
+          } }}`,
+          '  {/** ... */}',
+          '>',
+          `  <PiecewiseColorLegend`,
+          `      axisDirection="x"`,
+          `      position={${
+            props.direction === 'row'
+              ? `{ vertical: 'top', horizontal: 'middle' }`
+              : `{ vertical: 'middle', horizontal: 'right' }`
+          }}`,
+          `      direction="${props.direction}"`,
+          ...(props.hideFirst ? ['      hideFirst'] : []),
+          `      padding={${props.padding}}`,
+          `      labelStyle={{ fontSize: ${props.fontSize} }}`,
+          `    />`,
+          '</LineChart>',
+        ].join('\n');
+      }}
+    />
+  );
+}