How to usepointStyle with Transparent Color in Chart.js
In this we hide points in a line graph by setting the pointBackgroundColor and pointBorderColor to ‘rgba(0, 0, 0, 0)’ (transparent color)
Example: In this example we are assigning “pointBackgroundColor”: ‘rgba(0, 0, 0, 0)’ and “pointBorderColor”: ‘rgba(0, 0, 0, 0)’ 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', pointBackgroundColor: 'rgba(0, 0, 0, 0)', pointBorderColor: 'rgba(0, 0, 0, 0)', pointRadius: 5, // Set the radius as needed 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