Hide points in ChartJS LineGraph
Javascriptchart.jsJavascript Problem Overview
Originally I set the fill color for each point to be completely transparent. If I run my mouse over the graph, the points pop up. I want to hide all points so that the line graph is smooth.
Javascript Solutions
Solution 1 - Javascript
You can achieve this by setting point's radius property in configuration options as follows:
var chartConfig = {
type: 'line',
options: {
elements: {
point:{
radius: 0
}
}
}
}
Tooltips for the points will also gone off.
Solution 2 - Javascript
You can set the pointRadius
to zero.
var myChart = new Chart(
ctx, {
type: 'line',
data: {
labels: [...]
datasets: [
{
data: [...],
pointRadius: 0, # <<< Here.
}
]
},
options: {}
})
Solution 3 - Javascript
I had the same problem, but I wanted to keep the hover option active. There is my solution:
const config = {
type: 'line',
data: {
datasets:[{
label: 'Température',
borderColor: 'rgb(255, 99, 132)',
data: tempE,
pointStyle: 'rect',
}]
},
options: {
elements:{
point:{
borderWidth: 0,
radius: 10,
backgroundColor: 'rgba(0,0,0,0)'
}
}
}
};