CODEWITHSUNDEEP
javascriptvue.jschart.jsvue-chartjs
Ivan Parra
Ivan Parra

Reputation: 660

Chartjs with Vue, Bar Chart Border Radius not working

I have this component called BarChart.vue, and I'm trying to get the borderRadius to work and I've tried everything to get it working, but but it have been helpless. This is the code:

<script>
//Importing Bar class from the vue-chartjs wrapper
import { Bar } from "vue-chartjs";
//Exporting this so it can be used in other components
export default {
  name: "BarChart",
  extends: Bar,
  props: {
    barData: {
      type: Object,
    },
    barThick: {
      type: Number,
    },
  },
  data() {
    return {
      datacollection: {
        //Data to be represented on x-axis
        labels: this.barData.labels,
        datasets: [
          {
            label: "Ranking",
            backgroundColor: "#e5e5e5",
            barThickness: this.barThick,
            maxBarThickness: 20,
            borderWidth: 1,
            borderSkipped: false,
            borderRadius: 10,
            //Data to be represented on y-axis
            data: this.barData.data,
          },
        ],
      },
      //Chart.js options that controls the appearance of the chart
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
                fontColor: "black",
                suggestedMax: 100,
              },
              gridLines: {
                display: true,
              },
            },
          ],
          xAxes: [
            {
              ticks: {
                fontSize: 12,
                fontColor: "black",
                fontFamily: "Roboto",
                maxRotation: 90,
                minRotation: 90,
              },
              gridLines: {
                display: false,
              },
            },
          ],
        },
        legend: {
          display: false,
        },
        responsive: true,
        maintainAspectRatio: false,
      },
    };
  },
  mounted() {
    //renderChart function renders the chart with the datacollection and options object.
    this.renderChart(this.datacollection, this.options);
  },
};
</script>

Currently, with that code, the chart looks like this: enter image description here

I've been searching about this all day long and I haven't found a solution.

Upvotes: 2

Views: 3392

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31411

You are using V2 of the lib, borderradius was only introduced in V3 of the lib so you will need to update chart.js. although the Vue wrapper is not compatible with chart.js V3 so you will need to implement chart.js yourself

Upvotes: 2

Related Questions