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
Approach 1: Using pointStyle with Transparent Color
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.
<!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=
</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:
Approach 2: 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.
<!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=
</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: