Search code examples
javascriptvue.jsvue-chartjs

How to remove text over Vue Chart data points?


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


Solution

  • 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
      }
    }