Setting pointRadius to 0
In this you can set the pointRadius property to 0 in the dataset configuration. This approach will make the points invisible while still rendering the line.
Example: In this example, we are assigning 0 to “radius” within datasets within data.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hide Points in Line Graph</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"> </script></head><body> <div> <div> <canvas id="lineChartID"></canvas> </div> </div> <script> let ctx = document.getElementById('lineChartID').getContext('2d'); new Chart(ctx, { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My Dataset', data: [65, 71, 62, 81, 34, 55, 47], borderColor: 'blue', pointStyle: 'circle', radius: 0, // Set radius to 0 to hide points fill: false, tension: 0.1 }] } }); </script></body></html> |
Output:
How to Hide Points in a Line Graph in Chart.js ?
Chart.js is a popular JavaScript library that allows developers to create interactive and visually appealing charts on web pages. In this article, we will explore how to hide points in a line graph using Chart.js. This can be useful when you want to emphasize the trend of the data without displaying individual data points.
Below are the approaches used to hide points in a line graph in chart.js:
Table of Content
- Using pointStyle with Transparent Color
- Setting pointRadius to 0
Contact Us