Hide points in ChartJS LineGraph

Question

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.

Answer 1

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.

Answer 2

You can set the pointRadius to zero.

var myChart = new Chart(
    ctx, {
        type: 'line',
        data: {
            labels: [...]
            datasets: [
              {
                data: [...],
                pointRadius: 0,  # <<< Here.
              }
            ]
        },
        options: {}
    })

Answer 3

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

Answer 4

What actually worked for me to remove the points and keep the tooltip with the version 4 was to set the pointStyle property to false. Is the last option in the list provided in the official docs.

The code could be something like this:

const chart = new Chart('canvas-id', {
    type: 'line',
    data: {
        label: 'Some label',
        data: [...],
        pointStyle: false
    }
});