How to use ChartOptions in vue-chartjs with Composition API

Question

I am trying to use vue-chartjs but implement it with composition api. Most examples are either in typescript which I am not familiar with or using options api. I am unable to get chartOptions to work. I am not sure if I should be removing the chart-options and just do options or if there is something else I am missing such as an import. I tried to import ChartOptions in the chart-js import statement but it draws an error. Any help on how to implement this would be very helpful. Thanks!

<template>
  <Pie
    :chart-options="chartOptions"
    :chart-data="chartData"
    :chart-id="chartId"
    :dataset-id-key="datasetIdKey"
    :plugins="plugins"
    :css-classes="cssClasses"
    :styles="styles"
    :width="width"
    :height="height"
  />
</template>

<script>
import {ref, defineComponent, onMounted} from 'vue'
import {Pie} from 'vue-chartjs'
import {Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale} from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)

export default defineComponent({
  name: 'SectorPieChart',
  components: { Pie },
  props: {
    chartId: {
      type: String,
      default: 'pie-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 500
    },
    height: {
      type: Number,
      default: 500
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => {}
    },
    plugins: {
      type: Object,
      default: () => {}
    }
  },
  setup() {
    //stores
    const portfolioStore = usePortfolioStore()
    const {portfolio} = storeToRefs(portfolioStore)

    //dataset
    const chartData = ref({
        labels: [ 'Basic Materials', 'Consumer Cyclical', 'Financial Services', 'Real Estate', 'Consumer Defensive', 'Healthcare', 'Utilities', 'Communication Services', 'Energy', 'Industrials', 'Technology'],
        datasets: [
          { 
            backgroundColor: ['#FF4A4A','#FFAC4A','#FFE9C9','#F9C87C','#F97432','#7a7979','#FFCC00','#FF9900','#86370e','#FFFF66','#ed9e67'],
            data: [1,1,1,1,1,1,1,1,1,1,1] 
          },
          { 
            backgroundColor: ['#FF4A4A','#FFAC4A','#FFE9C9','#F9C87C','#F97432','#7a7979','#FFCC00','#FF9900','#86370e','#FFFF66','#ed9e67'],
            data: [1,1,1,1,1,1,1,1,1,1,1] 
          }
        ]
    })

    //chart options to change settings
    const chartOptions = ref({
        responsive: true,
        maintainAspectRatio: true,
        legend: {
          display: false,
        }
      })

    //methods
    const loadData = () => {

    }
      
    //add on mount API request
    onMounted(() => {
      loadData()   
    })

    return {
      chartData, chartOptions, loadData
    }
  }
})
</script>

@yoduh it only draws an error if I add ChartOptions to the import statement and says "SyntaxError: Importing binding name 'ChartOptions' is not found." Otherwise there is no error and it just does nothing. — Qiuzman
– Qiuzman, Commented Sep 12, 2022 at 0:58

kissu · Accepted Answer · 2022-09-13 14:47:14Z

3

According to the vue-chartjs there is no ChartOptions object/function that you can import. You're just meant to create your own array of options and bind it to the :chart-options prop, exactly how you're doing already.

In order to properly set chart options you should follow the chart.js documentation. As the documentation there notes, the legend options are namespaced as options.plugins.legend, and includes boolean property display that can turn off the legend display. This means we should format our chart options like so:

const chartOptions = ref({
  responsive: true,
  maintainAspectRatio: true,
  plugins: {
    legend: {
      display: false,
    },
  },
});

See codesandbox here.

edited Sep 13, 2022 at 14:47

kissu

47.3k16 gold badges94 silver badges196 bronze badges

answered Sep 12, 2022 at 1:16

yoduh

15.5k2 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Qiuzman Over a year ago

I checked your sandbox and the legend is still showing despite it’s listed as false. So how do you mean it’s still working?

yoduh Over a year ago

oh, I completely misunderstood your issue. I thought you were having trouble generating the actual chart. you're just having trouble setting certain options... I see now. I will update my answer

Manu Espinosa · Accepted Answer · 2023-07-17 00:33:38Z

1

Make computed your chartOptions:

const chartOptions = computed(() => {
  return ({
   maintainAspectRatio: true,
   plugins: {
    legend: {
      display: false,
    },
   },
  },
 })
})

And that's it...

answered Jul 17, 2023 at 0:33

Manu Espinosa

112 bronze badges

1 Comment

Bill Muxworthy Over a year ago

There is no value in a computed variable that always returns a constant object that never changes. If this is the options you'd be better off just making it a constant

Collectives™ on Stack Overflow

How to use ChartOptions in vue-chartjs with Composition API

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related