Floating bar chart data type & parsing of custom objects

[opremicJohannes]

Expected Behavior

ChartData should allow for the types (number[][]) mentioned in the documentation for floating bar charts or parsing of objects.

Current Behavior

Using arrays:

Type 'Chart<"bar", number[][], string>' is not assignable to type 'Chart<"bar", number[], unknown>'.
  The types of 'config.data' are incompatible between these types.
    Type 'ChartData<"bar", number[][], string>' is not assignable to type 'ChartData<"bar", number[], unknown>'.
      Type 'number[][]' is not assignable to type 'number[]'.ts(2322)

Using parsing:

Type 'Chart<"bar", { id: string; nested: { value: number; }; }[], unknown>' is not assignable to type 'Chart<"bar", number[], unknown>'.
  The types of 'config.data' are incompatible between these types.
    Type 'ChartData<"bar", { id: string; nested: { value: number; }; }[], unknown>' is not assignable to type 'ChartData<"bar", number[], unknown>'.
      Type '{ id: string; nested: { value: number; }; }[]' is not assignable to type 'number[]'.ts(2322)

Steps to Reproduce

I was trying to use floating bar charts in my Angular project but the types do not allow me to assign number[][] to the data property.

this.priceRangeChart = new Chart(this.priceRangeChartRef.nativeElement, {
  type: 'bar',
  data: {
    labels: Constants.CONDITIONS,
    datasets: [{ data: [[1,2], [1,2], [1,2], [1,2], [1,2], [1,2]] }],
  }
});

I also tried using the parsing option example from the documentation but it also doesn't allow me to do that either:

this.priceRangeChart = new Chart(this.priceRangeChartRef.nativeElement, {
  type: 'bar',
  data: {
    datasets: [{
        data: [ { id: 'Sales', nested: { value: 1500 } }, { id: 'Purchases', nested: { value: 500 } } ],
    }],
  },
  options: { parsing: { xAxisKey: 'id', yAxisKey: 'nested.value' },
  },
});

Environment

• Chart.js version: ^3.4.0
• Typescript version: ~4.2.3

[kurkle]

Both of these work with typescript 4.1.6, but not with 4.2.x or 4.3.x.

[DwieDima]

i have a similar issue for bubble chart, where i want to store custom data to dataset.
Heres my current workaround:

    datasets: [
      {
        data: [
          {
            x: 1,
            y: 1,
            r: 11,
            //@ts-ignore
            data: [
              { test1: "my custom data" },
              { test2: { nested: true } }
            ]
          }
    ]

  public chartClicked(event: any) {
    const activeElements = event.active;
    if (activeElements.length > 0) {
      const elem = activeElements[0];
      console.log(elem);
      const customdata = elem.element.$context.raw.data;
      console.log("custom data from bubble", customdata);
    }
  }

parsing did not work for me, i still get typescript error:

Type '{ x: number; y: number; r: number; data: ({ test1: string; } | { test2: { nested: true; }; })[]; }' is not assignable to type 'number | ScatterDataPoint | BubbleDataPoint | null'.
  Object literal may only specify known properties, and 'data' does not exist in type 'ScatterDataPoint | BubbleDataPoint'.

using
"typescript": "~4.2.3",
"chart.js": "^3.4.1"

[etimberg]

I upgraded locally to typescript 4.3.5. The test added in #9348 passes fine, however the existing https://github.com/chartjs/Chart.js/blob/master/types/tests/test_instance_assignment.ts fails

[etimberg]

It feels like this might be related to microsoft/TypeScript#41886

Same with microsoft/TypeScript#42421