MixChart in documentation

[djcaesar9114]

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?

There is no documentation on mixchart, for example when we want several line charts and one bar chart.

Describe the solution you'd like

I'd like an example to show how it's possible, as it's possible in chartJS, the basic library.

Describe alternatives you've considered

No response

Documentation, Adoption, Migration Strategy

No response

[ih84ds]

I spent a few hours on this and finally ended up using this hack because I couldn't figure out how to properly extend the Bar chart in a way that allows it to accept 'bar' | 'line' data and options. The resulting chart does work as expected, but I'm not happy with the hack. Shirley, there has to be a better way...

<template>
  <bar-chart :data="mixedChartData" :options="mixedChartOptions"></bar-chart>
</template>

<script lang="ts">
import {
  BarController,
  BarElement,
  CategoryScale,
  Chart as ChartJS,
  ChartData,
  ChartOptions,
  LinearScale,
  LineController,
  LineElement,
  PointElement,
  Title,
  Tooltip,
} from 'chart.js';
import { computed, defineComponent, PropType } from 'vue';
import { Bar as BarChart } from 'vue-chartjs';

ChartJS.register(
  BarController,
  BarElement,
  CategoryScale,
  LinearScale,
  LineController,
  LineElement,
  PointElement,
  Title,
  Tooltip
);

export default defineComponent({
  name: 'BarAndLineChart',
  components: {
    BarChart,
  },
  props: {
    chartData: {
      type: Object as PropType<ChartData<'bar' | 'line'>>,
      required: true,
    },
    chartOptions: {
      type: Object as PropType<ChartOptions<'bar' | 'line'>>,
      required: true,
    },
  },
  setup(props) {
    const mixedChartData = computed(() => {
      // HACK ALERT! masquerading as ChartData<'bar'> so that the typed Bar chart doesn't freak out
      return props.chartData as ChartData<'bar'>;
    });
    const mixedChartOptions = computed(() => {
      // HACK ALERT! masquerading as ChartOptions<'bar'> so that the typed Bar chart doesn't freak out
      return props.chartOptions as ChartOptions<'bar'>;
    });

    return {
      mixedChartData,
      mixedChartOptions,
    };
  },
});
</script>