I am using Vue-chart-3.js and chart.js in my Vue app and I want to display a stacked bar chart but somehow it is displaying a bar chart can anybody help me on this issue?
I have vanila js code (https://www.chartjs.org/docs/latest/samples/bar/stacked.html) and how should i integrate with my vue js ?
I attached StackedBarChart.vue file with this question and I want to know where should I put this(https://prnt.sc/psq2irkZwwVB) code to make it a stacked bar chart currently it displays a simple chart
StackedBarChart.vue
import { Chart, registerables } from 'chart.js';
import { BarChart, useBarChart } from 'vue-chart-3';
import { ref, computed } from 'vue';
Chart.register(...registerables);
export default {
name: 'FloatingBarChart',
components: {
BarChart,
},
setup() {
const config = computed(() => ({
// type: 'bar',
// data: data,
options: {
plugins: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked',
},
},
responsive: true,
scales: {
x: {
stacked: true,
},
y: {
stacked: true,
},
},
},
}));
const data = ref([30, 40, 60, 70, 5]);
const chartData = computed(() => ({
labels: ['Paris', 'Nîmes', 'Toulon', 'Perpignan', 'Autre'],
datasets: [
{
label: 'Dataset 1',
data: ['Paris', 'Nîmes', 'Toulon', 'Perpignan', 'Autre'].map(() => {
return [Math.random(0, data.value), Math.random(0, data.value)];
}),
backgroundColor: ['#77CEFF', '#0079AF', '#123E6B', '#97B0C4', '#A5C8ED'],
},
{
label: 'Dataset 2',
data: ['Paris', 'Nîmes', 'Toulon', 'Perpignan', 'Autre'].map(() => {
return [Math.random(0, data.value), Math.random(0, data.value)];
}),
backgroundColor: ['#77CEFF', '#0079AF', '#123E6B', '#97B0C4', '#A5C8ED'],
},
{
label: 'Dataset 3',
data: ['Paris', 'Nîmes', 'Toulon', 'Perpignan', 'Autre'].map(() => {
return [Math.random(0, data.value), Math.random(0, data.value)];
}),
backgroundColor: ['#77CEFF', '#0079AF', '#123E6B', '#97B0C4', '#A5C8ED'],
responsive: true,
},
],
}));
const { barChartProps, barChartRef } = useBarChart({
chartData,
config,
});
return {
barChartProps,
barChartRef,
};
},
options: {
scales: {
x: {
stacked: true,
},
y: {
stacked: true,
},
},
},
};.svg-inline--fa {
display: var(--fa-display, inline-block);
height: 1em;
overflow: visible;
vertical-align: -0.125em;
}<template>
<div class="col-xl-4">
<div class="card mb-4">
<div class="card-header">
<svg
class="svg-inline--fa fa-chart-area me-1"
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="chart-area"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
data-fa-i2svg=""
>
<path
fill="currentColor"
d="M64 400C64 408.8 71.16 416 80 416H480C497.7 416 512 430.3 512 448C512 465.7 497.7 480 480 480H80C35.82 480 0 444.2 0 400V64C0 46.33 14.33 32 32 32C49.67 32 64 46.33 64 64V400zM128 320V236C128 228.3 130.8 220.8 135.9 214.1L215.3 124.2C228.3 109.4 251.4 109.7 263.1 124.8L303.2 171.8C312.2 182.7 328.6 183.4 338.6 173.4L359.6 152.4C372.7 139.3 394.4 140.1 406.5 154.2L472.3 231C477.3 236.8 480 244.2 480 251.8V320C480 337.7 465.7 352 448 352H159.1C142.3 352 127.1 337.7 127.1 320L128 320z"
></path>
</svg>
Stacked Bar Chart Example
</div>
<div class="card-body">
<div style="width: 100%">
<BarChart v-bind="barChartProps" />
<!-- <canvas id="myChart" width="400" height="400"></canvas> -->
</div>
</div>
</div>
</div>
</template>