[charts] types not exported from ChartsTooltipTable

[tonyhallett]

Steps to reproduce

Steps:

1. See https://github.com/mui/mui-x/blob/master/packages/x-charts/src/ChartsTooltip/index.ts
2. Does not export https://github.com/mui/mui-x/blob/master/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts

Current behavior

The types are not exported.

Expected behavior

The types are exported.

Context

import the types for use in a custom ChartAxisTooltipContent

Your environment

System: OS: Windows 11 10.0.22631 Binaries: Node: 22.2.0 - C:\Program Files\nodejs\node.EXE npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (126.0.2592.81) npmPackages: @emotion/react: ^11.11.4 => 11.11.4 @emotion/styled: ^11.11.5 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.20 @mui/icons-material: ^5.15.20 => 5.15.20 @mui/material: ^5.15.20 => 5.15.20 @mui/private-theming: 5.15.20 @mui/styled-engine: 5.15.14 @mui/system: 5.15.20 @mui/types: 7.2.14 @mui/utils: 5.15.20 @mui/x-charts: ^7.7.1 => 7.7.1 @types/react: ^18.3.3 => 18.3.3 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: ^5.4.5 => 5.4.5

Search keywords: ChartsTooltipTable ChartsTooltipPaper

[alexfauquette]

That's on purpose. The ChartsTooltipTable file contains some styled component we use to create our default tooltip contents. But if you want to create a custom one, we recommend to restart the content from scratch.

Components in ChartsTooltipTable are so simple that it feels better to copy past them in your codebase with small modification than to import them from @mui/x-charts and override their style.

But maybe I misunderstood what you tried to do

[tonyhallett]

Agreed that they are simple but they are sensible, well styled table components for a chart tooltip. If I have a chart using the default and one that is custom that too presents with a table then it makes sense to reuse these chart tooltip table components. Yes I can copy the code but if the default styling changes....

[alexfauquette]

but if the default styling changes

Then your custom will not be impacted and the default will be.

It's better than if you customized our components, in such case the risk would be that your customization conflicts with our modification, leading to a broken design

If I have a chart using the default and one that is custom

Why would you have charts with custom tooltips and others with default one? For me you override them all for consistency in the design system

By the way we do not do big design modification outside of major version bump

[tonyhallett]

Why would you have charts with custom tooltips and others with default one?

Because the default is applicable in some instances and not in others. The ChartsTooltip has two triggers, axis and item with corresponding components that use the available data to provide props to components that do the actual rendering. mui provides default rendering components. For instance https://github.com/mui/mui-x/blob/master/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx that provides a header with the axis value and a row for each series value.
These defaults apply in most cases but are not always sufficient, hence the slots availability.

So if I want similarly table styling on the default and my custom tooltips I will have to either copy the components from https://github.com/mui/mui-x/blob/master/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts on each and every project or create a copy of https://github.com/mui/mui-x/blob/master/packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx that uses my version /copy of ChartsTooltipTable etc that is shared by my CustomChartsAxisTooltipContent. I then need to provide CopiedDefaultChartsAxisTooltipContent in slots for when I want the default rendering behaviour.

[alexfauquette]

Knowing the kind of customization you want to achieve could help to give you a better answer. Could you provide a screen shot, of your tooltip design? MUI has multiple way to customize and the charts try to stick with it under some contains due to the size of the components. The best way to customize the tooltip will depend on the goal

each and every project

Do you have a lot of projects using it? Whatever the solution, you will always have to copy/paste the customization in your projects, except if you creat a package with it

[tonyhallett]

The customization is to use the provided ChartsAxisContentProps with an additional prop provided in slotProps so as to obtain a richer data model to render.

interface CustomChartAxisTooltipContentPropsFromSlots { getData: (dataIndex: number) => CustomChartAxisTooltipContentData; } interface CustomChartAxisTooltipContentProps extends ChartsAxisContentProps, CustomChartAxisTooltipContentPropsFromSlots {}

The CustomChartAxisTooltipContentData is then rendered in a table.... and then we are back to the same point. It makes sense to style the same as the default.

So if I want similarly table styling on the default and my custom tooltips I will have to either copy the components from https://github.com/mui/mui-x/blob/master/packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts on each and every project

except if you creat a package with it

Creating a package does not really assist in this matter. Any time mui updates the components in ChartsTooltipTable a new package will need to be created to maintain the common styling.

[JCQuintas]

Hi @tonyhallett, would it be possible for you to show a UI of what you are trying to accomplish? An alternative would be to use https://codesandbox.io or https://stackblitz.com/ to create the code using imports from @mui/x-charts/ChartsTooltip/ChartsTooltipTable

import { 
  ChartsTooltipTable, 
  ChartsTooltipPaper, 
  ChartsTooltipRow, 
  ChartsTooltipCell, 
  ChartsTooltipMark 
} from '@mui/x-charts/ChartsTooltip/ChartsTooltipTable';

This way we can better understand your use-case and create proper documentation for it. 💪