I am working with the Line
component from react-chartjs-2
and having trouble with removing labels on the points of the line.
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
Found the right config to hide data point labels. It was:
Found it here for anyone interested: Chartjs hide data point labels
change your chart settings/options
set element > point > radius to 0, which will hide the data point label