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>
legend is a plugin for charts, so it will be under the plugins in options.
options: {
plugins: {
legend: {
display: false
}
}
}