How to remove point labels in react-chartjs-2 Line component?

105 Views Asked by At

I am working with the Line component from react-chartjs-2 and having trouble with removing labels on the points of the line.

Line Graph Result

Line Options:

const chartOptions: DeepPartial<
  CoreChartOptions<"line"> &
    ElementChartOptions<"line"> &
    PluginChartOptions<"line"> &
    DatasetChartOptions<"line"> &
    ScaleChartOptions<"line"> &
    LineControllerChartOptions
> = {
  responsive: true,
  plugins: {
    legend: {
      position: "top" as const,
    },
    title: {
      display: false,
    },
  },
  elements: {
    point: {
      radius: 2,
    },
  },
};

Line Data:

const chartData: ChartData<"line", number[], string> = {
    labels: Object.keys(sampleData),
    datasets: [
      {
        label: "Score",
        data: Object.values(sampleData).map(
          (val) => Math.round(val * 100) / 100
        ),
        backgroundColor: "#FF6384",
        borderColor: "#FF6384",
        pointRadius: 1,
        borderWidth: 2,
        tension: 0.1,
      } as ChartDataset<"line", number[]>,
    ],
  };

Sample data:

const sampleData = {
    "2016-08-28": 0.5786274509803921,
    "2016-10-09": -0.5872549019607842,
    "2016-10-10": 0.02058823529411765,
    "2016-11-07": 0.05679738562091504,
}
1

There are 1 best solutions below

0
On

Found the right config to hide data point labels. It was:

plugins: {
    datalabels: {
        display: false,
    },
}

Found it here for anyone interested: Chartjs hide data point labels