diff --git a/docs/pages/x/api/charts/charts-axis-tooltip-content.json b/docs/pages/x/api/charts/charts-axis-tooltip-content.json index 490c5caabb74..c1cc1bbfb3d1 100644 --- a/docs/pages/x/api/charts/charts-axis-tooltip-content.json +++ b/docs/pages/x/api/charts/charts-axis-tooltip-content.json @@ -7,6 +7,12 @@ "import { ChartsAxisTooltipContent } from '@mui/x-charts-pro';" ], "classes": [ + { + "key": "axisValueCell", + "className": "MuiChartsAxisTooltipContent-axisValueCell", + "description": "Styles applied to the axisValueCell element. Only available for axis tooltip.", + "isGlobal": false + }, { "key": "cell", "className": "MuiChartsAxisTooltipContent-cell", diff --git a/docs/pages/x/api/charts/charts-item-tooltip-content.json b/docs/pages/x/api/charts/charts-item-tooltip-content.json index 02c2c55fb327..0d615795096e 100644 --- a/docs/pages/x/api/charts/charts-item-tooltip-content.json +++ b/docs/pages/x/api/charts/charts-item-tooltip-content.json @@ -7,6 +7,12 @@ "import { ChartsItemTooltipContent } from '@mui/x-charts-pro';" ], "classes": [ + { + "key": "axisValueCell", + "className": "MuiChartsItemTooltipContent-axisValueCell", + "description": "Styles applied to the axisValueCell element. Only available for axis tooltip.", + "isGlobal": false + }, { "key": "cell", "className": "MuiChartsItemTooltipContent-cell", diff --git a/docs/pages/x/api/charts/charts-tooltip-container.json b/docs/pages/x/api/charts/charts-tooltip-container.json index 9cd49bc06e0b..4e3a06ef05b4 100644 --- a/docs/pages/x/api/charts/charts-tooltip-container.json +++ b/docs/pages/x/api/charts/charts-tooltip-container.json @@ -81,6 +81,12 @@ "import { ChartsTooltipContainer } from '@mui/x-charts-pro';" ], "classes": [ + { + "key": "axisValueCell", + "className": "MuiChartsTooltipContainer-axisValueCell", + "description": "Styles applied to the axisValueCell element. Only available for axis tooltip.", + "isGlobal": false + }, { "key": "cell", "className": "MuiChartsTooltipContainer-cell", diff --git a/docs/pages/x/api/charts/charts-tooltip.json b/docs/pages/x/api/charts/charts-tooltip.json index a93f7eb3ce17..f89a6742ab27 100644 --- a/docs/pages/x/api/charts/charts-tooltip.json +++ b/docs/pages/x/api/charts/charts-tooltip.json @@ -80,6 +80,12 @@ "import { ChartsTooltip } from '@mui/x-charts-pro';" ], "classes": [ + { + "key": "axisValueCell", + "className": "MuiChartsTooltip-axisValueCell", + "description": "Styles applied to the axisValueCell element. Only available for axis tooltip.", + "isGlobal": false + }, { "key": "cell", "className": "MuiChartsTooltip-cell", diff --git a/docs/pages/x/api/charts/heatmap-tooltip.json b/docs/pages/x/api/charts/heatmap-tooltip.json index b33bacabfc5f..ed4926bc1079 100644 --- a/docs/pages/x/api/charts/heatmap-tooltip.json +++ b/docs/pages/x/api/charts/heatmap-tooltip.json @@ -72,6 +72,12 @@ "import { HeatmapTooltip } from '@mui/x-charts-pro';" ], "classes": [ + { + "key": "axisValueCell", + "className": "MuiHeatmapTooltip-axisValueCell", + "description": "Styles applied to the axisValueCell element. Only available for axis tooltip.", + "isGlobal": false + }, { "key": "cell", "className": "MuiHeatmapTooltip-cell", diff --git a/docs/translations/api-docs/charts/charts-axis-tooltip-content/charts-axis-tooltip-content.json b/docs/translations/api-docs/charts/charts-axis-tooltip-content/charts-axis-tooltip-content.json index 53a4cfd97b0f..8a249dcb7c7f 100644 --- a/docs/translations/api-docs/charts/charts-axis-tooltip-content/charts-axis-tooltip-content.json +++ b/docs/translations/api-docs/charts/charts-axis-tooltip-content/charts-axis-tooltip-content.json @@ -4,6 +4,10 @@ "classes": { "description": "Override or extend the styles applied to the component." } }, "classDescriptions": { + "axisValueCell": { + "description": "Styles applied to {{nodeName}}. Only available for axis tooltip.", + "nodeName": "the axisValueCell element" + }, "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" }, "labelCell": { "description": "Styles applied to {{nodeName}}.", diff --git a/docs/translations/api-docs/charts/charts-item-tooltip-content/charts-item-tooltip-content.json b/docs/translations/api-docs/charts/charts-item-tooltip-content/charts-item-tooltip-content.json index 53a4cfd97b0f..8a249dcb7c7f 100644 --- a/docs/translations/api-docs/charts/charts-item-tooltip-content/charts-item-tooltip-content.json +++ b/docs/translations/api-docs/charts/charts-item-tooltip-content/charts-item-tooltip-content.json @@ -4,6 +4,10 @@ "classes": { "description": "Override or extend the styles applied to the component." } }, "classDescriptions": { + "axisValueCell": { + "description": "Styles applied to {{nodeName}}. Only available for axis tooltip.", + "nodeName": "the axisValueCell element" + }, "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" }, "labelCell": { "description": "Styles applied to {{nodeName}}.", diff --git a/docs/translations/api-docs/charts/charts-tooltip-container/charts-tooltip-container.json b/docs/translations/api-docs/charts/charts-tooltip-container/charts-tooltip-container.json index b64c46287a30..4f492a2a5780 100644 --- a/docs/translations/api-docs/charts/charts-tooltip-container/charts-tooltip-container.json +++ b/docs/translations/api-docs/charts/charts-tooltip-container/charts-tooltip-container.json @@ -46,6 +46,10 @@ } }, "classDescriptions": { + "axisValueCell": { + "description": "Styles applied to {{nodeName}}. Only available for axis tooltip.", + "nodeName": "the axisValueCell element" + }, "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" }, "labelCell": { "description": "Styles applied to {{nodeName}}.", diff --git a/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json b/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json index 13d995719059..4f1aba6c8bbe 100644 --- a/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json +++ b/docs/translations/api-docs/charts/charts-tooltip/charts-tooltip.json @@ -45,6 +45,10 @@ } }, "classDescriptions": { + "axisValueCell": { + "description": "Styles applied to {{nodeName}}. Only available for axis tooltip.", + "nodeName": "the axisValueCell element" + }, "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" }, "labelCell": { "description": "Styles applied to {{nodeName}}.", diff --git a/docs/translations/api-docs/charts/heatmap-tooltip/heatmap-tooltip.json b/docs/translations/api-docs/charts/heatmap-tooltip/heatmap-tooltip.json index 43442d3a2732..7beaf0a59a59 100644 --- a/docs/translations/api-docs/charts/heatmap-tooltip/heatmap-tooltip.json +++ b/docs/translations/api-docs/charts/heatmap-tooltip/heatmap-tooltip.json @@ -42,6 +42,10 @@ } }, "classDescriptions": { + "axisValueCell": { + "description": "Styles applied to {{nodeName}}. Only available for axis tooltip.", + "nodeName": "the axisValueCell element" + }, "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" }, "labelCell": { "description": "Styles applied to {{nodeName}}.", diff --git a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx index a175b3fb4f9e..6af034904d1a 100644 --- a/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx +++ b/packages/x-charts/src/ChartsTooltip/ChartsAxisTooltipContent.tsx @@ -44,8 +44,8 @@ function ChartsAxisTooltipContent(props: ChartsAxisTooltipContentProps) { {axisValue != null && !axis.hideTooltip && ( - - + + {axisFormattedValue} diff --git a/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts b/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts index 2d0d846d2ab6..2569dd7b07d4 100644 --- a/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts +++ b/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts @@ -10,11 +10,10 @@ export const ChartsTooltipPaper = styled('div', { slot: 'Container', overridesResolver: (props, styles) => styles.paper, })(({ theme }) => ({ - boxShadow: theme.shadows[1], backgroundColor: (theme.vars || theme).palette.background.paper, color: (theme.vars || theme).palette.text.primary, - transition: theme.transitions.create('box-shadow'), borderRadius: theme.shape.borderRadius, + border: `solid ${(theme.vars || theme).palette.divider} 1px`, })); /** @@ -40,10 +39,10 @@ export const ChartsTooltipRow = styled('tr', { overridesResolver: (props, styles) => styles.row, })(({ theme }) => ({ 'tr:first-of-type& td': { - paddingTop: theme.spacing(1), + paddingTop: theme.spacing(0.5), }, 'tr:last-of-type& td': { - paddingBottom: theme.spacing(1), + paddingBottom: theme.spacing(0.5), }, })); @@ -59,16 +58,23 @@ export const ChartsTooltipCell = styled('td', { color: (theme.vars || theme).palette.text.secondary, [`&.${chartsTooltipClasses.labelCell}`]: { paddingLeft: theme.spacing(1), + paddingRight: theme.spacing(1.5), + fontWeight: theme.typography.fontWeightRegular, }, - [`&.${chartsTooltipClasses.valueCell}`]: { - paddingLeft: theme.spacing(4), + + [`&.${chartsTooltipClasses.valueCell}, &.${chartsTooltipClasses.axisValueCell}`]: { color: (theme.vars || theme).palette.text.primary, + fontWeight: theme.typography.fontWeightMedium, + }, + [`&.${chartsTooltipClasses.valueCell}`]: { + paddingLeft: theme.spacing(1.5), + paddingRight: theme.spacing(1.5), }, 'td:first-of-type&': { - paddingLeft: theme.spacing(2), + paddingLeft: theme.spacing(1.5), }, 'td:last-of-type&': { - paddingRight: theme.spacing(2), + paddingRight: theme.spacing(1.5), }, })); @@ -84,9 +90,6 @@ export const ChartsTooltipMark = styled('div', { width: theme.spacing(1), height: theme.spacing(1), borderRadius: '50%', - boxShadow: theme.shadows[1], background: color, - borderColor: (theme.vars || theme).palette.background.paper, - border: `solid ${(theme.vars || theme).palette.background.paper} ${theme.spacing(0.25)}`, boxSizing: 'content-box', })); diff --git a/packages/x-charts/src/ChartsTooltip/chartsTooltipClasses.ts b/packages/x-charts/src/ChartsTooltip/chartsTooltipClasses.ts index ca48ae98be11..b4a19190bbb6 100644 --- a/packages/x-charts/src/ChartsTooltip/chartsTooltipClasses.ts +++ b/packages/x-charts/src/ChartsTooltip/chartsTooltipClasses.ts @@ -21,6 +21,8 @@ export interface ChartsTooltipClasses { labelCell: string; /** Styles applied to the valueCell element. */ valueCell: string; + /** Styles applied to the axisValueCell element. Only available for axis tooltip. */ + axisValueCell: string; } export type ChartsTooltipClassKey = keyof Omit< @@ -34,7 +36,18 @@ export function getChartsTooltipUtilityClass(slot: string) { } export const chartsTooltipClasses: ChartsTooltipClasses = generateUtilityClasses( 'MuiChartsTooltip', - ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell'], + [ + 'root', + 'paper', + 'table', + 'row', + 'cell', + 'mark', + 'markCell', + 'labelCell', + 'valueCell', + 'axisValueCell', + ], ); export const useUtilityClasses = (classes?: Partial) => { @@ -48,6 +61,7 @@ export const useUtilityClasses = (classes?: Partial) => { markCell: ['markCell'], labelCell: ['labelCell'], valueCell: ['valueCell'], + axisValueCell: ['axisValueCell'], }; return composeClasses(slots, getChartsTooltipUtilityClass, classes);