Hide points in ChartJS LineGraph

Javascriptchart.js

Javascript 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)'
  				}
  			}
  		}
  	};

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDanView Question on Stackoverflow
Solution 1 - JavascriptShivamView Answer on Stackoverflow
Solution 2 - JavascriptAlexanderView Answer on Stackoverflow
Solution 3 - JavascripttortupizzaView Answer on Stackoverflow