javascript - Hide points in ChartJS LineGraph - Stack Overflow

admin管理员组

文章数量:1134247

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.

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
• chart.js

Share Improve this question Follow asked Jan 28, 2016 at 22:55 DanDan 1,93233 gold badges1313 silver badges2828 bronze badges

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 231

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.

You can set the pointRadius to zero.

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

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

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

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

本文标签： javascriptHide points in ChartJS LineGraphStack Overflow