[Chartjs]-Bar chart from Vue-chartjs doesn't render

by

1👍

✅

The mistake in the method this.renderChart(). I had to look at the documentation to figure out how it should be structured.
The method this.renderChart() is provided by the Bar component and accepts two parameters: both are objects. The first one is your chart data, and the second one is an options object.
More in docs – https://www.chartjs.org/docs/latest/charts/bar.html

This worked for me:

<script>
    import { Bar } from "vue-chartjs";
    
    export default {
      extends: Bar,
      mounted() {
        this.renderChart(
          {
            labels: [
              "London",
              "New York",
              "New Zeland",
            ],
            datasets: [
              {
                label: "Data One",
                backgroundColor: "#f87979",
                data: [
                  83,
                  26,
                  4,
                ]
              }
            ]
          },
          { responsive: true }
        );
      }
    };
    </script>

Leave a comment