CODEWITHSUNDEEP
vue.jsvue-chartjsumd
Vaquez Vincent
Vaquez Vincent

Reputation: 55

Change bar graph option in vue-chartjs when using umd

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>

Upvotes: 0

Views: 19

Answers (0)

Related Questions