Content-Length: 262016 | pFad | http://github.com/apertureless/vue-chartjs/issues/1027

40 Mix chart component · Issue #1027 · apertureless/vue-chartjs · GitHub
Skip to content

Mix chart component #1027

Open
Open
@palsingh

Description

@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:

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions









      ApplySandwichStrip

      pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


      --- a PPN by Garber Painting Akron. With Image Size Reduction included!

      Fetched URL: http://github.com/apertureless/vue-chartjs/issues/1027

      Alternative Proxies:

      Alternative Proxy

      pFad Proxy

      pFad v3 Proxy

      pFad v4 Proxy