How to hide Chart.js legend in Vue?-CodePudding

I'm using Vue Chart.js to create charts in my projects. I tried to hide the legend, but it doesn't seem like it recognizes my display:false command. I tried to use the example they offered on their github repository. The chart-data get loaded properly. Am I doing something wrong? (I use Vue 2).

<template>
  <Bar
      :chart-options="chartOptions"
      :chart-data="chartData"
      :width="width"
      :height="height"
  />
</template>

<script>
import {Bar} from 'vue-chartjs/legacy'
import {Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale} from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
  name: 'MyBarChart',
  components: {Bar},
  props: {
    chartId: {
      type: String,
      default: 'bar-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 200
    },
    chartData:{
      type: Object,
      default: () => {

      }
    }
  },
  data() {
    return {

      chartOptions: {
        responsive: true,
        legend: {
          display: false
        }
      }
    }
  },

}
</script>

CodePudding user response：

legend is a plugin for charts, so it will be under the plugins in options.

options: {
   plugins: {
      legend: {
         display: false
      }
   }
}