vue-chartjs V4 with mixed chart type using Typescript

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?

Trying to use a mixed chart but can’t find a way to implement. Have looked at;

• 123 - But I get Bar.extend is not a function
• 29 - But I get Chart.Bar.extend is not a function

I’m not able to see a way to do this with V4 and TS.

Describe the solution you’d like

Ability to create new custom mixed chart.

Describe alternatives you’ve considered

No response

Documentation, Adoption, Migration Strategy

No response

[mcelligottnick]

@ArturoTorresMartinez this is very stripped down and not exactly working, but this should give you an idea. Note the main thing you have to populate is the datasets array.

<template>
	<Bar
		v-if="activities.length > 0"
		:chart-data="chartData.data"
		:chart-options="chartData.options"
		:height="200"
	/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Bar } from 'vue-chartjs';
import { Chart, BarElement, LineController } from 'chart.js';

Chart.register(BarElement, LineController);

export default defineComponent({
	components: { Bar },
	computed: {
		chartData() {
			// can't get any correcty typings working here, I think because
			// we are using a mixed chart type
			const d = {
				data: {
					datasets: [],
				},
				options: {
					scales: {
						monetary: {
							position: 'right',
							ticks: {
								beginAtZero: true,
							},
							title: {
								display: true,
								text: 'Monetary',
							},
						},
						acc: {
							position: 'left',
							ticks: {
								beginAtZero: true,
							},
							grid: {
								// only want the grid lines for one axis to show up
								drawOnChartArea: false, 
							},
							title: {
								display: true,
								text: 'Accumulative',
							},
						},
					},
				},
			} as any;
			return d;
		},
	},
});
</script>

[mcelligottnick]

I’m glad mate!