[charts] Use new text component to avoid tick label overflow on x-axis (

mui#10648) Co-authored-by: Lukas <[email protected]> Co-authored-by: Sam Sycamore <[email protected]>
JCQuintas · Oct 19, 2023 · 79bbfa6 · 79bbfa6
1 parent a13750b
commit 79bbfa6
Show file tree

Hide file tree

Showing 45 changed files with 1,328 additions and 165 deletions.
diff --git a/docs/data/charts/axis/AxisCustomizationNoSnap.js b/docs/data/charts/axis/AxisCustomizationNoSnap.js
@@ -17,7 +17,6 @@ const defaultXAxis = {
  disableTicks: false,
  fontSize: 12,
  label: 'My axis',
- labelFontSize: 14,
  tickSize: 6,
 };
 export default function AxisCustomizationNoSnap() {
@@ -27,9 +26,7 @@ export default function AxisCustomizationNoSnap() {
  data={[
  { propName: 'disableLine', knob: 'switch', defaultValue: false },
  { propName: 'disableTicks', knob: 'switch', defaultValue: false },
- { propName: 'fontSize', knom: 'number', defaultValue: 12 },
  { propName: 'label', knob: 'input', defaultValue: 'my axis' },
- { propName: 'labelFontSize', knom: 'number', defaultValue: 14 },
  { propName: 'tickSize', knob: 'number', defaultValue: 6 },
  ]}
  renderDemo={(props) => (

diff --git a/docs/data/charts/axis/AxisTextCustomizationNoSnap.js b/docs/data/charts/axis/AxisTextCustomizationNoSnap.js
@@ -0,0 +1,170 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
+import { BarChart } from '@mui/x-charts/BarChart';
+
+const chartSetting = {
+ height: 300,
+};
+const dataset = [
+ {
+ london: 59,
+ paris: 57,
+ newYork: 86,
+ seoul: 21,
+ month: 'Jan',
+ },
+ {
+ london: 50,
+ paris: 52,
+ newYork: 78,
+ seoul: 28,
+ month: 'Fev',
+ },
+ {
+ london: 47,
+ paris: 53,
+ newYork: 106,
+ seoul: 41,
+ month: 'Mar',
+ },
+ {
+ london: 54,
+ paris: 56,
+ newYork: 92,
+ seoul: 73,
+ month: 'Apr',
+ },
+ {
+ london: 57,
+ paris: 69,
+ newYork: 92,
+ seoul: 99,
+ month: 'May',
+ },
+ {
+ london: 60,
+ paris: 63,
+ newYork: 103,
+ seoul: 144,
+ month: 'June',
+ },
+ {
+ london: 59,
+ paris: 60,
+ newYork: 105,
+ seoul: 319,
+ month: 'July',
+ },
+ {
+ london: 65,
+ paris: 60,
+ newYork: 106,
+ seoul: 249,
+ month: 'Aug',
+ },
+ {
+ london: 51,
+ paris: 51,
+ newYork: 95,
+ seoul: 131,
+ month: 'Sept',
+ },
+ {
+ london: 60,
+ paris: 65,
+ newYork: 97,
+ seoul: 55,
+ month: 'Oct',
+ },
+ {
+ london: 67,
+ paris: 64,
+ newYork: 76,
+ seoul: 48,
+ month: 'Nov',
+ },
+ {
+ london: 61,
+ paris: 70,
+ newYork: 103,
+ seoul: 25,
+ month: 'Dec',
+ },
+];
+
+const valueFormatter = (value) => `${value}mm`;
+
+export default function AxisTextCustomizationNoSnap() {
+ return (
+ <ChartsUsageDemo
+ componentName="Alert"
+ data={[
+ { propName: 'angle', knob: 'number', defaultValue: 45, min: -180, max: 180 },
+ {
+ propName: 'textAnchor',
+ knob: 'select',
+ defaultValue: 'start',
+ options: ['start', 'middle', 'end'],
+ },
+ { propName: 'fontSize', knob: 'number', defaultValue: 12 },
+ { propName: 'labelFontSize', knob: 'number', defaultValue: 14 },
+ ]}
+ renderDemo={(props) => (
+ <Box sx={{ width: '100%', maxWidth: 400 }}>
+ <BarChart
+ dataset={dataset}
+ xAxis={[
+ {
+ scaleType: 'band',
+ dataKey: 'month',
+ label: 'months',
+ labelStyle: {
+ fontSize: props.labelFontSize,
+ transform: `translateY(${
+ 5 * Math.abs(Math.sin((Math.PI * props.angle) / 180))
+ }px)`,
+ },
+ tickLabelStyle: {
+ angle: props.angle,
+ textAnchor: props.textAnchor,
+ fontSize: props.fontSize,
+ },
+ },
+ ]}
+ series={[
+ { dataKey: 'london', label: 'London', valueFormatter },
+ { dataKey: 'paris', label: 'Paris', valueFormatter },
+ { dataKey: 'newYork', label: 'New York', valueFormatter },
+ { dataKey: 'seoul', label: 'Seoul', valueFormatter },
+ ]}
+ {...chartSetting}
+ />
+ </Box>
+ )}
+ getCode={({ props }) =>
+ [
+ `import { ScatterChart } from '@mui/x-charts/ScatterChart';`,
+ '',
+ `<ScatterChart`,
+ ' {/** ... */}',
+ ` bottomAxis={{`,
+ ` labelStyle: {`,
+ ` fontSize: ${props.labelFontSize},`,
+ ` transform: \`translateY(\${
+ // Hack that should be added in the lib latter.
+ 5 * Math.abs(Math.sin((Math.PI * props.angle) / 180))
+ }px)\``,
+ ` },`,
+ ` tickLabelStyle: {`,
+ ` angle: ${props.angle},`,
+ ` textAnchor: '${props.textAnchor}',`,
+ ` fontSize: ${props.fontSize},`,
+ ` },`,
+ ' }}',
+ '/>',
+ ].join('\n')
+ }
+ />
+ );
+}
diff --git a/docs/data/charts/axis/TickLabelPosition.js b/docs/data/charts/axis/TickLabelPosition.js
@@ -0,0 +1,97 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+import { LineChart } from '@mui/x-charts/LineChart';
+
+export default function TickLabelPosition() {
+ return (
+ <Box sx={{ width: '100%', maxWidth: 800 }}>
+ <LineChart
+ xAxis={[
+ {
+ ...xAxisCommon,
+ id: 'bottomAxis',
+ scaleType: 'point',
+ tickInterval: (time) => [0, 12].includes(time.getHours()),
+ tickLabelInterval: (time) => time.getHours() === 0,
+ },
+ {
+ ...xAxisCommon,
+ id: 'topAxis',
+ scaleType: 'point',
+ },
+ ]}
+ {...config}
+ />
+ </Box>
+ );
+}
+
+const valueFormatter = (date) =>
+ date.toLocaleDateString('fr-FR', {
+ month: '2-digit',
+ day: '2-digit',
+ });
+
+const timeData = [
+ new Date(2023, 7, 31),
+ new Date(2023, 7, 31, 3),
+ new Date(2023, 7, 31, 6),
+ new Date(2023, 7, 31, 9),
+ new Date(2023, 7, 31, 12),
+ new Date(2023, 7, 31, 15),
+ new Date(2023, 7, 31, 18),
+ new Date(2023, 8, 1),
+ new Date(2023, 8, 1, 3),
+ new Date(2023, 8, 1, 6),
+ new Date(2023, 8, 1, 9),
+ new Date(2023, 8, 1, 12),
+ new Date(2023, 8, 1, 15),
+ new Date(2023, 8, 1, 18),
+ new Date(2023, 8, 2),
+ new Date(2023, 8, 2, 3),
+ new Date(2023, 8, 2, 6),
+ new Date(2023, 8, 2, 9),
+ new Date(2023, 8, 2, 12),
+ new Date(2023, 8, 2, 15),
+ new Date(2023, 8, 2, 18),
+ new Date(2023, 8, 3),
+ new Date(2023, 8, 3, 3),
+ new Date(2023, 8, 3, 6),
+ new Date(2023, 8, 3, 9),
+ new Date(2023, 8, 3, 12),
+ new Date(2023, 8, 3, 15),
+ new Date(2023, 8, 3, 18),
+ new Date(2023, 8, 4),
+];
+
+const y1 = [
+ 5, 5.5, 5.3, 4.9, 5, 6.2, 8.9, 10, 15, 30, 80, 90, 94, 93, 85, 86, 75, 70, 68, 50,
+ 20, 30, 35, 28, 25, 27, 30, 28, 25,
+];
+
+const y2 = [
+ 90, 93, 89, 84, 85, 83, 73, 70, 63, 32, 30, 25, 18, 19, 23, 30, 32, 36, 40, 40, 42,
+ 45, 46, 42, 39, 40, 41, 43, 50,
+];
+
+const showMark = (params) => {
+ const { position } = params;
+ return position.getHours() === 0;
+};
+
+const config = {
+ series: [
+ { data: y1, showMark },
+ { data: y2, showMark },
+ ],
+ height: 300,
+ topAxis: 'topAxis',
+ bottomAxis: 'bottomAxis',
+ leftAxis: null,
+};
+const xAxisCommon = {
+ data: timeData,
+ scaleType: 'time',
+ valueFormatter,
+};
diff --git a/docs/data/charts/axis/TickLabelPosition.tsx b/docs/data/charts/axis/TickLabelPosition.tsx
@@ -0,0 +1,96 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { ShowMarkParams } from '@mui/x-charts/models';
+import { LineChart } from '@mui/x-charts/LineChart';
+
+export default function TickLabelPosition() {
+ return (
+ <Box sx={{ width: '100%', maxWidth: 800 }}>
+ <LineChart
+ xAxis={[
+ {
+ ...xAxisCommon,
+ id: 'bottomAxis',
+ scaleType: 'point',
+ tickInterval: (time) => [0, 12].includes(time.getHours()),
+ tickLabelInterval: (time) => time.getHours() === 0,
+ },
+ {
+ ...xAxisCommon,
+ id: 'topAxis',
+ scaleType: 'point',
+ },
+ ]}
+ {...config}
+ />
+ </Box>
+ );
+}
+
+const valueFormatter = (date: Date) =>
+ date.toLocaleDateString('fr-FR', {
+ month: '2-digit',
+ day: '2-digit',
+ });
+
+const timeData = [
+ new Date(2023, 7, 31),
+ new Date(2023, 7, 31, 3),
+ new Date(2023, 7, 31, 6),
+ new Date(2023, 7, 31, 9),
+ new Date(2023, 7, 31, 12),
+ new Date(2023, 7, 31, 15),
+ new Date(2023, 7, 31, 18),
+ new Date(2023, 8, 1),
+ new Date(2023, 8, 1, 3),
+ new Date(2023, 8, 1, 6),
+ new Date(2023, 8, 1, 9),
+ new Date(2023, 8, 1, 12),
+ new Date(2023, 8, 1, 15),
+ new Date(2023, 8, 1, 18),
+ new Date(2023, 8, 2),
+ new Date(2023, 8, 2, 3),
+ new Date(2023, 8, 2, 6),
+ new Date(2023, 8, 2, 9),
+ new Date(2023, 8, 2, 12),
+ new Date(2023, 8, 2, 15),
+ new Date(2023, 8, 2, 18),
+ new Date(2023, 8, 3),
+ new Date(2023, 8, 3, 3),
+ new Date(2023, 8, 3, 6),
+ new Date(2023, 8, 3, 9),
+ new Date(2023, 8, 3, 12),
+ new Date(2023, 8, 3, 15),
+ new Date(2023, 8, 3, 18),
+ new Date(2023, 8, 4),
+];
+
+const y1 = [
+ 5, 5.5, 5.3, 4.9, 5, 6.2, 8.9, 10, 15, 30, 80, 90, 94, 93, 85, 86, 75, 70, 68, 50,
+ 20, 30, 35, 28, 25, 27, 30, 28, 25,
+];
+const y2 = [
+ 90, 93, 89, 84, 85, 83, 73, 70, 63, 32, 30, 25, 18, 19, 23, 30, 32, 36, 40, 40, 42,
+ 45, 46, 42, 39, 40, 41, 43, 50,
+];
+
+const showMark = (params: ShowMarkParams) => {
+ const { position } = params as ShowMarkParams<Date>;
+ return position.getHours() === 0;
+};
+
+const config = {
+ series: [
+ { data: y1, showMark },
+ { data: y2, showMark },
+ ],
+ height: 300,
+ topAxis: 'topAxis',
+ bottomAxis: 'bottomAxis',
+ leftAxis: null,
+};
+const xAxisCommon = {
+ data: timeData,
+ scaleType: 'time',
+ valueFormatter,
+} as const;
diff --git a/docs/data/charts/axis/TickNumber.js b/docs/data/charts/axis/TickNumber.js
@@ -29,7 +29,7 @@ const valueFormatter = (date) =>
 
 const config = {
  series: [{ data: y1 }, { data: y2 }],
- height: 400,
+ height: 300,
  topAxis: 'half days',
  leftAxis: null,
 };