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.

Heelandtoe

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.

Tremayne

this config is global, but I got a chart which included 3 lines chart, I just wanna disable one of them – Digestible

@Digestible you can set the pointRadius property on each individual dataset object. See @Alexander's answer below. – Hexagon

Answer 2

You can set the pointRadius to zero.

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

Asa

I've added "borderWidth: 1" and "pointRadius: 0.5" because I also needed a fine line and tiny dots to hover over them. – Roseannroseanna

I needed to add pointHitRadius: 0 as well to disable tooltips. – Pardner

@throrin19 What did not work? It is fully documented per the link above. – Asa

Oups sorry. I think I have disabled my click. My problem was with vue-chartjs. Options have not sync correctly with chartJS – Obstruent

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

Blowpipe

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

Voluminous

This is the best answer! The only problem is that TS doesn't like the pointstyle being a boolean, but I just suppress that – Bondwoman

Answer 5

You can set the radius: 0 to hide the dot, additionally you can turn up the hitRadius: 10 which sets the radius outside of the dot which you can hover to make the popover show. This allows you to hide the dot while still making the point easy to hover and open the tooltip.

var chartConfig = {
  type: 'line',
  options: {
    elements: {
      point: {
        radius: 0,
        hitRadius: 10,
      }
    }
  }
}

More documentation on elements in chart.js can be found here: https://www.chartjs.org/docs/latest/configuration/elements.html

Confront