Mix chart component

[palsingh]

Would you like to work on this feature?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

What problem are you trying to solve?

Currently, developers cannot create a mix chart without breaking typescript, or users have to implement their custom solutions. This is not a good developer experience.
There should be a component which should create a mix chart with typescript compatibility.

Related issues:

• [Bug]: mixed type with bar and line can not assign to data property #1010
• MixChart in documentation #1013

Describe the solution you'd like

Currently, typedCharts is creating components which are specific to chart type. The data prop is ChartData<TType, TData, TLabel> type.
In order to support mix chart type, Chartjs exposes another type, i.e. ChartDataCustomTypesPerDataset<TType, TData, TLabel>.

I would like to create an alternate mixTypedChart, which will:

• Export a component named Mix. <Mix :data="data" :options="options" />
• For data props, it will accept ChartDataCustomTypesPerDataset
• Support all types of charts.
• Does not require TType input from the developer.

If you allow, I would like to create a PR for this as well.

Describe alternatives you've considered

I tried to add ChartDataCustomTypesPerDataset type to the data prop, but it will not be suitable because developers will have to use the existing chart components in order to render the mix chart, for example:
<Bar :data="mixChartData" :options="options" />

It is confusing because the component says Bar but the chart rendered will be mixed.
However, I was not able to make it work without typescript issues.

Documentation, Adoption, Migration Strategy

We should create:

• Documentation, similar to existing charts.
• Stackblitz demo
• Storybook.