CODEWITHSUNDEEP
vue.jspluginschart.jsvue-chartjs
Lim
Lim

Reputation: 779

Can't apply options of datalabels chartjs plugin in Vue

I tried to use Chart.js in Vue through vue-chartjs. Also, I used [chartjs-plugin-datalabels][1]. Currently, I can toggle a chart by clicking the "Show a chart" button.

Current Status

I could see values for each label in the chart. But, I couldn't customize the data labels.

[StackOverflow]

[The plugin's Github Page]

[JS Fiddle]

Even after reading information above, I couldn't make mine work.

I would greatly appreciate any advice of solving this problem. Thanks! :)

Some of my code is the following:

<script>
import PieChart from "./pieChart.js";
import ChartJSPluginDatalabels from "chartjs-plugin-datalabels";

export default {
  name: "App",
  components: {
    PieChart
  },
  data() {
    return {
      isHidden: false,
      chartData: {
        labels: ["Green", "Red", "Blue"],
        datasets: [
          {
            backgroundColor: ["#41B883", "#E46651", "#00D8FF"],
            data: [1, 10, 5]
          }
        ]
      },
      options:{
        plugins: {
          datalabels: {
            color: 'white',
            textAlign: 'center',
            font: {
              weight: "bold",
              size: 16
            }
          }
        }
      }
    }
  }
};
</script>

Please check out the entire code here : https://codesandbox.io/embed/xy4x07q0o.

Upvotes: 3

Views: 6435

Answers (1)

ittus
ittus

Reputation: 22403

You need to bind options to pie-chart

  <pie-chart v-if="isHidden" :data="chartData" :options="options"></pie-chart>

Checkout demo here https://codesandbox.io/s/5kvll0xqyl

Upvotes: 3

Related Questions