I'm trying to draw some mixed graphs (Histogram and lines) on a one page HTML integrating Vue and Vuetify. Apprently only vuechartJS as a package that could be integrated with
I managed to extends the bar graph of vuechartJS as a component and the graph is drawn. But I can't managed to change the graphs options (grid, legends etc)
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
rel="stylesheet"
/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"
rel="stylesheet"
/>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
/>
<style>
* {
word-break: normal !important;
}
</style>
</head>
<body><div id="app">
<chart-component
v-for="(dataset, index) in chartData"
:key="index"
:data="dataset.values.map(item => item.value)"
:labels="dataset.values.map(item => item.mois)"
:title="dataset.title"
:xLabel="dataset.xLabel"
:yLabel="dataset.yLabel"
:barColor="dataset.barColor"
:lineColor="dataset.lineColor"
:barWidth="dataset.barWidth">
</chart-component>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-chartjs.min.js"></script>
<script>
Vue.component('chart-component', {
extends: VueChartJs.Bar,
props: ['data', 'labels', 'title', 'xLabel', 'yLabel', 'barColor', 'lineColor', 'barWidth'],
data() {
return {
options: { //Chart.js options
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: false
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
},
legend: {
display: true,
position: "bottom", // "top", "bottom", "left", "right"
},
responsive: true,
maintainAspectRatio: false
}
}
},
mounted() {
this.renderChart({
labels: this.labels,
datasets: [
{
type: 'bar',
label: this.title,
data: this.data,
backgroundColor: this.barColor,
barPercentage: this.barWidth
},
{
type: 'line',
label: 'Tendance',
data: this.data.map(d => d * 1.1), // Simulation d'une tendance
borderColor: this.lineColor,
fill: false
}
]
},
this.options);
}
});
new Vue({
el: '#app',
data() {
return {
chartData: [
{
title: "Ventes Mensuelles",
values: [
{ mois: "Janvier", value: 1 },
{ mois: "Février", value: 2 },
{ mois: "Mars", value: 3 },
{ mois: "Avril", value: 4 },
{ mois: "Mai", value: 5 },
{ mois: "Juin", value: 6 },
{ mois: "Juillet", value: 7 },
{ mois: "Août", value: 8 },
{ mois: "Septembre", value: 9 },
{ mois: "Octobre", value: 1 },
{ mois: "Novembre", value: 1 },
{ mois: "Décembre", value: 1 }
],
xLabel: "Mois",
yLabel: "Ventes (€)",
barColor: 'rgba(54, 162, 235, 0.5)',
lineColor: 'rgba(255, 99, 132, 1)',
barWidth: 0.6
}
]
};
}
});
</script>