Property 'type' does not exist on type 'ChartConfigurationCustomTypesPerDataset'

[HimanshuGoel]

Expected behavior

It should not give a typescript error while accessing the 'type' property on the chart instance.

"Property 'type' does not exist on type 'ChartConfigurationCustomTypesPerDataset'"

Current behavior

After migrating the 'chart.js' library from 3.7.1 to 3.9.1, the typescript compiler throws an error while accessing the 'type' property on the chart instance config object.

I have noticed that in this recent version a change has been introduced for the interface of chart instance type, but there is no 'type' attribute has been exposed on it -

export interface ChartConfigurationCustomTypesPerDataset<
  TType extends ChartType = ChartType,
  TData = DefaultDataPoint<TType>,
  TLabel = unknown
> {
  data: ChartDataCustomTypesPerDataset<TType, TData, TLabel>;
  options?: ChartOptions<TType>;
  plugins?: Plugin<TType>[];
}

After drilling down further into it, I noticed that in the 4.0.0-alpha.3 release, this property has been introduced on this interface against commit number. When I upgrade the library to this version, this issue went away. -

interface ChartConfigurationCustomTypesPerDataset<
  TType extends ChartType = ChartType,
  TData = DefaultDataPoint<TType>,
  TLabel = unknown
> {
  type: TType;
  data: ChartDataCustomTypesPerDataset<TType, TData, TLabel>;
  options?: ChartOptions<TType>;
  plugins?: Plugin<TType>[];
}

The problem is, this version is currently in alpha release so we can't use it now, and no 3.9.x version contains this fix.

Reproducible sample

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgYQBYENZwL5wGZQQhwDkAxhrAHQBWAziQNwCwAUGwG6ZxkwAecALxwAJhDIBXEAFMAdjCoBzaTACiAG2kz5AIQCeASREAKAEQg9aTDFMBKOOjpwAEgBUAsgBlk6WVzoaWnIwLKxcUHAWVljCstIA7iiUMMa8fAA0iGxwOXAwemDSAFyk6sBxJOnZuSLoMOglCNW5ueroAEbS6nQlANqmAErSIqaZpjrqEtKjcKYAml3qEPEzpgDiUNJyqwAKElBgmqsA8lC+yqYAulWsLS219XQqPXC9Tbd3n22d6iUkAMRwCB4OAANQgMGkDBun0+DwarwAjAAmTKIgCcmQAzJkAKyZVFwLHXZp3bCXUnYGG5CBgGDACCyF7vT50MjoTTM0ktPiNbl3fk5KmCuB6PkfWFwEXYfkyiU4NjYWyhNhkRl0CCaKhLRTGKLJKhq2R4YCKKj5Qq2NhAA

Optional extra steps/info to reproduce

It can directly be seen in the typescript playground example -

Possible solution

The solution already has been introduced in the 4.0.0-alpha.3 but needs to backport for the 3.9.x version.

Context

No response

chart.js version

v3.9.1

Browser name and version

No response

Link to your project

No response

[LeeLenaleee]

The old one is correct, the "fix" in alpha is incorrect. That interface is used for when you want to have a chart without a default type but instead specify it per dataset.

You need to use the ChartConfiguration interface itself

[HimanshuGoel]

Thanks, @LeeLenaleee for a quick response.

Could you please share some references or documentation for an example?

When I tried to see the documentation and sample application for reproduction, I could not find any example to create the Chart instance in a proper way so that I can access the type property on it by using the ChartConfiguration interface approach.

• https://www.chartjs.org/docs/latest/
• https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgYQBYENZwL5wGZQQhwDkAxhrAHQBWAziQNwCwAUGwG6ZxkwAecALxwAJhDIBXEAFMAdjCoBzaTACiAG2kz5AIQCeASREAKAEQg9aTDFMBKOOjpwAEgBUAsgBlk6WVzoaWnIwLKxcUHAWVljCstIA7iiUMMa8fAA0iGxwOXAwemDSAFyk6sBxJOnZuSLoMOglCNW5ueroAEbS6nQlANqmAErSIqaZpjrqEtKjcKYAml3qEPEzpgDiUNJyqwAKElBgmqsA8lC+yqYAulWsLS219XQqPXC9Tbd3n22d6iUkAMRwCB4OAANQgMGkDBun0+DwarwAjAAmTKIgCcmQAzJkAKyZVFwLHXZp3bCXUnYGG5CBgGDACCyF7vT50MjoTTM0ktPiNbl3fk5KmCuB6PkfWFwEXYfkyiU4NjYWyhNhkRl0CCaKhLRTGKLJKhq2R4YCKKj5Qq2NhAA

[LeeLenaleee]

Don't have access to my PC till Sunday so you will need to wait till then

[LeeLenaleee]

You need to cast it to the correct config type, will look into this later when I have more time if there is a way to detect which one got used so the correct typing is returned:

const config = myChart.config as ChartConfiguration;
const type = config.type;

console.log(type);

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgYQBYENYBoUdsiAOwDNgBzAVynRmCLgF85ioIQ4ByAYzxgDoAVgGcOAbgCwAKCkA3THC4wAHnAC8cACYQuFEAFNC-MnpgBRADZ79hgEIBPAJIaAFACIQdtJhiuAlHHQhOAAJABUAWQAZZHRCOSELKwMYCUk5KDgPL1g1OEI9AHdcb2dFJRwEKThquBg7MD0ALk5zYHyOLCqajRp0ZsrJGqG4c3QAIz1zIWaAbVcAJT0NVxxXG3MKPRW4VwBNSfMIAu3XAHEoPQMTgAUqMEsTgHlqQmNXAF1OweHqnphAkzTOAzAY-H6jCbmZocADEcAgxDgADUIDA9CIvmDhn8+sCAIwAJhweIAnDgAMw4ACsOCJcHJny6PwY7yZjExNQgYFoRCBoOGQi46EsfLZQyU-TFwyl1QYHJ+dkl3yxMsYUoYbI1kgYvlSUi4vPgBpI5FyWV4fGNpDIASC2RgBBNlGoPMIqWNQngdQauSt5D43r0eskHoglj4hzIzkDuqkUiAA

[HimanshuGoel]

Thanks, @LeeLenaleee , I will go with this workaround for now.

[dangreen]

Actually, config is ChartConfiguration | ChartConfigurationCustomTypesPerDataset, and type exists only in ChartConfiguration. So in a true typescript way, we can make this:

if ('type' in config) {
  // config is ChartConfiguration
} else {
  // config is ChartConfigurationCustomTypesPerDataset
}

So there is no issue here, I think we can close this issue.

@LeeLenaleee @HimanshuGoel WDYT?

[HimanshuGoel]

@dangreen
From my perspective, if I am creating a chart instance like mentioned in the documentation -

const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    }
  });

Down the line, if need to find out the type of the chart from its instances, then why it is not available? Ideally, either it should return me the proper chart type i.e. ChartConfiguration or this type property should also be available on ChartConfigurationCustomTypesPerDataset instead of checking whether the type property is present or not.

Also, is there any other way by which I can initiate a chart so that it will give me the ChartConfiguration type?