Mixed chart example in documentaion has a configuration that doesnt match the ChartConfiguration Type

[dhertzb]

Documentation Is:

• Missing or needed?
• Confusing
• Not sure?

Please Explain in Detail...

First example here doesnt work in charts.js@3.8.0

const mixedChart = new Chart(ctx, {
    data: {
        datasets: [{
            type: 'bar',
            label: 'Bar Dataset',
            data: [10, 20, 30, 40]
        }, {
            type: 'line',
            label: 'Line Dataset',
            data: [50, 50, 50, 50],
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: options
});

---

When I try to emulate that in my chart

return new Chart(ctx, {
      data: {
        datasets: [
          {
            type: 'bar',
            borderColor: 'yellow',
            data: this.getChartDataForUserPointer(),
            backgroundColor: 'yellow',
          },
          {
            type: 'line',
            borderColor: '#7655e9',
            data: this.getGeneralChartDataByCategory(),
            backgroundColor: this.getGradient(ctx),
            fill: true,
            pointRadius: 0,
          },
        ],
      }
    });
  }

I get the follow error:

Argument of type '{ data: { datasets: ({ type: "bar"; borderColor: string; data: ICordinates[]; backgroundColor: string; } | { type: "line"; borderColor: string; data: ICordinates[]; backgroundColor: any; fill: true; pointRadius: number; })[]; }; options: { ...; }; }' is not assignable to parameter of type 'ChartConfiguration<"bar" | "line", ICordinates[], unknown>'.
  Property 'type' is missing in type '{ data: { datasets: ({ type: "bar"; borderColor: string; data: ICordinates[]; backgroundColor: string; } | { type: "line"; borderColor: string; data: ICordinates[]; backgroundColor: any; fill: true; pointRadius: number; })[]; }; options: { ...; }; }' but required in type 'ChartConfiguration<"bar" | "line", ICordinates[], unknown>'.ts(2345)

I also checked the ChartConfiguration Interface and the TType is really mandatory, so I have to check the old commits in file documentation to get a way to work.

So when I change to this, It works!

 return new Chart(ctx, {
      type: 'bar',
      data: {
        datasets: [
          {
            borderColor: 'yellow',
            data: this.getChartDataForUserPointer(),
            backgroundColor: 'yellow',
          },
          {
            type: 'line',
            borderColor: '#7655e9',
            data: this.getGeneralChartDataByCategory(),
            backgroundColor: this.getGradient(ctx),
            fill: true,
            pointRadius: 0,
          },
        ],
      },
    });
  }

Your Proposal for Changes

Revert to old example!

Example

No response

[LeeLenaleee]

Technically it is not necesarry to provide a type. As you can see in the linked fiddle if you provide a type to every dataset it also works.
But it is required to give either all the datasets their own type or a default type otherwise the chart wont render.

Not sure if you can go in depth enough that typescript will check if all datasets have a type or if at least a default type is available

https://jsfiddle.net/0k2L7q65/