skip to Main Content

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

2

Answers


  1. Chosen as BEST ANSWER

    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


  2. change your chart settings/options

    set element > point > radius to 0, which will hide the data point label

    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: 0, // set this to 0, which will hide the data point label
        },
      },
    };
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search