I'm trying to make a simple line chart using vue-chartjs but I can't seem to get rid of the text over top of each data point. I can't seem to find anywhere how to get rid of this or anyone else who's had this problem. I've simplified the situation for the sake of demonstration below:
The chart data I pass in through props is defined as
let chartData = {
labels: ['a', 'b', 'c'],
datasets: [
{
data: [{ x: 'a', y: 1 }, { x: 'b', y: 2 }, { x: 'c', y: 3 }]
}
]
};
The lineChart.js file accepts the props as:
export default {
extends: Line,
props: {
chartData: {
type: Object,
default: null
}
},
mixins: [mixins.reactiveProp],
mounted() {
this.renderChart(this.chartData);
},
};
Using the default options, I get a chart that looks like this: Chart Image
I realized that I had the chartjs-plugin-datalabels imported in my package.json file. The default for this is to label the data points. To disable this I included the following in my options:
defaultOptions: {
plugins: {
"name given to plugin": false
}
}