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>

Answer 1

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.