Types: `scale.title` does not exist when a `legend` `onClick` handler is specified

[StephanTLavavej]

Expected behavior

After creating a Chart, I want to update its colors dynamically. I understand that I can't directly say chart.options.scales.x.title.color because the properties starting with scales are optional. However, I expect to be able to test chart.options.scales?.x?.title?.color === undefined, and if that's false, TypeScript should allow me to assign a new color to chart.options.scales.x.title.color.

Current behavior

Under certain conditions, TypeScript 4.7.4 emits an error when I try to access title:

Property 'title' does not exist on type '_DeepPartialObject<{ type: "linear"; } & CartesianScaleOptions & { beginAtZero: boolean; suggestedMin?: number | undefined; suggestedMax?: number | undefined; grace?: string | number | undefined; ticks: { ...; }; }> | ... 4 more ... | _DeepPartialObject<...>'.
  Property 'title' does not exist on type '_DeepPartialObject<{ type: "radialLinear"; } & CoreScaleOptions & { animate: boolean; startAngle: number; angleLines: { display: boolean; color: Scriptable<Color, ScriptableScaleContext>; lineWidth: Scriptable<...>; borderDash: Scriptable<...>; borderDashOffset: Scriptable<...>; }; ... 7 more ...; ticks: RadialTickO...'.

The conditions appear to be:

• A legend onClick handler is specified.
• The error goes away if I change the handler's third parameter from LegendElement<ChartType> to any.
• The error goes away if I omit the handler entirely.
• The error never happens with ticks, only with title. I am not sure why title is special.

Reproducible sample

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgYQBYENYBoUdgUQDcBTAOxhzUxgBUBPMYnAGWIHMyATfAG2JDIU4rDqU4BJGPxxR2wAM5So6AEZ95cAL5wAZlAgg4AcgDGeGADoAVvKMBuALAAoKrAuy2CpQAoLfj17EymrE8gCUjk7OOgCupCYwwBCkcHyinAD6JjzAJgDWGRhifFDeGcQk5ABcuNREgjgZaVwZwFIgNSJcktJwTexcnQNivPyCADyutAzEAHxhiJrOzibJinCK6DAx8lnmcAC8cKTEAO61sN5Gm9vyU0Y4CM5wL3AwMzVGOScPz6+cW3QNSeTleYLgAJg6HkxBg8hqAG0-uDwSCUej-oDEciMbikAAPGoARgADDg6DUACxaLA43Hogk1ABMZLgFLgAE4aXT6ai4IS4ABmVnsokANm5oN5YIAurSpdKXjxVMQeJ8TFtbPLpZptei5TjdTiIGBEmtgTyXmAeDFPKR4YhLeDmmILQrFclkDl8jUXZlsrkCkVOCU9fSje6wRGMfINeo3dKBWjFS93oxPt9iJgjHBoXBVvaKE6MYkYHwEynwaseNBPgBiQWNpu-SOVzgKa3odkwKAxJjF3lSfEwT4CCCnFuVyVTxL5B3Jqcvau14wNpuNyeV6O87f09kIXfgw8RzQRZZOAvrWPoPiHDZQ257agWE1m+0Wa-qAD8FnxkWcwA6HA3ifsQhwHEccScMQOjACcnBwAAPohGxxsQFilreEGQWIMFwcQCHIahN7obOeQaNhcBQXh8ELAubyoPo5wnOc+BQPopRGAA6gA8jxABiRhnk4SxRE4oEYW0fAWMuUB3kYdb8fxJIqSS9jOBJZHyDJEA1nJRwKapJJKepYk3DsT5uDEYCQsQ3jCUAA

Optional extra steps/info to reproduce

Here's a CodePen (with TypeScript types commented out), showing that this works at runtime: https://codepen.io/StephanTLavavej/pen/GRxKJgz

TypeScript examples:

• original repro with error
• error vanishes if handler's third parameter is any
• error vanishes if handler is removed entirely

Possible solution

No response

Context

I'm implementing dark mode for the microsoft/STL Status Chart at https://microsoft.github.io/STL/ . I converted it to use TypeScript a couple of months ago, but haven't tried to change colors dynamically until now.

chart.js version

v3.8.0

Browser name and version

Chrome 103.0.5060.53

Link to your project

No response

[etimberg]

What I think happens is that the legend causes the type of the scale to be any of the scales. Since the RadialLinearScaleOptions don't have a title, this error appears. https://github.com/chartjs/Chart.js/blob/master/types/index.esm.d.ts#L3345-L3456

I was able to resolve the error by changing the type definition for the 3rd argument of the legend callback to _legend: LegendElement<'line'>. If your chart is always a line chart this seems like the correct solution.

Another option is to make the click handler an arrow function onClick: (_event, _legend_item, _legend) => {} and then the types for all 3 arguments appear automatically

[StephanTLavavej]

Thanks! I have both 'line' and 'bar' | 'line' charts, which made things more complicated, but I was able to get this working.

[etimberg]

I think 'bar' | line'` should be fine since those are both cartesian charts and thus can use the same axis types.

[mrleblanc101]

I also have 2 similar Typescript error related to the title:

First, I've used this to make all title bold and it works. If I remove this line, the title are normal, instead of bold.
Why would the Default be affected by the fact that RadiarLinear, which I don't use, doesn't have a title.
It should just ignore this property when cloning the default, no ?
When changing the global default, I have no way of knowing the type of the chart.

ChartJS.defaults.scale.title.font = { weight: 'bold' };

Property 'title' does not exist on type 'ScaleOptionsByType. Property 'title' does not exist on type '{ type: "radialLinear"; } & CoreScaleOptions & { ...

Second, I change the color dynamically based on my app theme.
I've tried only updating ChartJS.defaults.color and calling instance.update(), but it doesn't seem to work.
From what I've read, I need to update the individual property on each individual charts by looping over them.
Now I know the type of the chart, so I use scope narrowing to filter out radialLinear, but I still get an error saying that scale.title does not exist on radialLinear, so the narrowing doesn't seem to work.

watch(
    () => colorMode.value,
    (val) => {
        console.log(val);
        if (val === 'light') {
            ChartJS.defaults.color = '#000';
        } else {
            ChartJS.defaults.color = '#fff';
        }
        Object.values(ChartJS.instances).forEach((instance) => {
            Object.values(instance.config.options?.scales || {}).forEach((scale) => {
                if (scale && scale.type !== 'radialLinear') {
                    if (scale.title) scale.title.color = ChartJS.defaults.color as string; // <--- Here: Property 'title' does not exist on type...
                    if (scale.ticks) scale.ticks.color = ChartJS.defaults.color as string;
                }
            });
            instance.update();
        });
    },
    { immediate: true },
);

Property 'title' does not exist on type '_DeepPartialObject<{ type: "radialLinear"; } & CoreScaleOptions & { ...