In this article, we are going to talk about another special feature of Chart Js, Let’s say I want to hide some data points in the line chart as shown in the below image. I have explored everywhere on the internet but couldn’t find the appropriate solution to achieve this task. so I decided to write this article.
For achieving this task, change pointRadius to an array-like below
pointRadius: [0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 5]
0=hide datapoint, greater than zero means it shows the point.
Look below configuration
data: {
labels: xValues,
datasets: [
{
label: 'Sale',
lineTension: 0,
borderColor: 'red',
data: [343, 343, 8, 550, 89, 89, 898, 232, 343, 243, 554],
pointRadius: [0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 5]
}
]
}
How to hide some points inside line graph Chart Js
<!DOCTYPE html>
<html>
<head>
<title>ChartJS-Hide Points in Line Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
</head>
<body>
<div style="margin-left:5%;margin-right:5%">
<canvas id="myLineChart" style="width:100%;max-width:100%"></canvas>
</div>
<script>
var xValues = [2011, 2012, 2013, 2014, 2016, 2017, 2018, 2019, 2020, 2021, 2022];
const MultiLinechartData = {
type: "line",
data: {
labels: xValues,
datasets: [
{
label: 'Sale',
lineTension: 0,
borderColor: 'red',
data: [343, 343, 8, 550, 89, 89, 898, 232, 343, 243, 554],
pointRadius: [0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 5]
}
]
},
options: {
plugins: {
title: {
display: true,
text: 'Sale Chart',
}
},
scales: {
x: {
display: true,
title: {
display: true,
text: 'Year'
}
},
y: {
display: true,
title: {
display: true,
text: 'Sale($)'
}
}
}
}
};
new Chart("myLineChart", MultiLinechartData);
</script>
</body>
</html>
Output Graph
*Thank you so much if you have a question please comment
So it creates some curves and we will do that by putting in the tension here. If we say tension 0.4, by default it is set on zero which means that we have these straight lines but once put on 0.4 it becomes far more elastic. Once we do that we have a nicer smooth line with more elasticity. Next what I want to do is I want to increase the thickness of here border.
This thickness should be done about three pixels. All right, so now we have this. How do we remove these points items here? So basically these point items are based on the point radius. So all we have to do here is put a comma it’s a point radius and I’m going to indicate here zero pixels.
It would indicate that the radius or the circle radius will be equal to zero pixels. And by default, it’s probably like five to ten pixels. If I refresh now, you can see now our dots have been disappearing here and of course, we still have here what we call the hoovering effect here. We can remove this as well. To do this all you have to do is a comma and then we say Hoover coin radius.
Pay attention here to the capital P and the capital R. Same story here. Then we say here as well zero. Save that refresh. Now if you hook over it you might notice here we have hardly anything here and I guess the tooltip is there we are.
I do notice here something so I just have to check what it is. So I just quickly checked apparently I made a tiny mistake. Instead of Hoover point radius, it is point Hoover radius. Point Hoover radius still with capital H, capital R here. Also on zero.
Save that refresh and now if you go over it here you might see it here. Let’s see this is very tough. There we are. So we move over it. We don’t have any Hoover effect here on it.
But of course, it’s quite hard to pinpoint the exact dots or Pixel here where you have to Hover over and that’s basically here how you can make a smooth line here including the Hoover and removing the Hoover point radius as well.
The post [Simple Trick]-How to Hide Some Points in ChartJS appeared first on Software Development | Programming Tutorials.
Read More Articles
- [Simple Way]-JavaScript Edit table row Using Popup
- [Simple Way]-Add/Delete table rows dynamically using JavaScript
- [Simple Way]-CRUD operations using JSON in JavaScript
- [Simple Way]-Fetch data from API and display in table React Js
- [Simple Way]-How to display array data into tables in Reactjs
- [Simple Way]-How to create common helper class in React JS? | Fetch data from API using helper class and functions
- Simple React.js CRUD Example With Rest API
- [Simple Trick]-Hide Points in ChartJS Line Graph
- [Simple Trick]-How to Hide Some Points in ChartJS
- How to leave just points without lines in ChartJS
- [Simple Trick]-Set Different Color For Each Bar in a Bar Chart in ChartJS
- [Simple Trick]-How to Combined Bar and line charts Using Chart.js?
- [Simple Trick]-In Chart.js set Chart Title, Name of X axis and Y axis
- [Simple Trick]-Stacked and Grouped Bar Chart Chart.js Example
- [Simple Trick]-How to display Grouped Bar Chart Using Chart Js?
- [Simple Trick]-Create a Multi Line Chart Using Chart.js
- [Simple Trick]-How to comment and uncomment blocks of code in the VBA Editor
- [Simple Way]-Cascading DropDownList in Asp.Net Mvc Using Jquery Ajax
- [Simple Way]-How to get data from database using JQuery Ajax in asp net MVC
- [Simple Way]-ASP.NET Core Upload Multiple File Web API model
- [Simple Way]- Image Upload in .NET Core Web API
- Simple Way Find and replace text in Word document using C#
- Simple way to Parse JSON with Excel VBA
- Simple Way To Insert ,Update and Delete in Gridview-Asp.Net
- SQL Server – -Simple way to transpose rows into columns
- Dynamically update values of a chartjs chart
- Chart.js v2 hide dataset labels
- how to set start value as "0" in chartjs?
- Different color for each bar in a bar chart; ChartJS
- Hide points in ChartJS LineGraph
- ChartJS Line Charts - remove color underneath lines
- Skip decimal points on y-axis in chartJS
- How to set ChartJS Y axis title?
- Hide/disable tooltips chart.js
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- How to hide y axis line in ChartJs?
- How to vary the thickness of doughnut chart, using ChartJs.?
- Chartjs Bar Chart showing old data when hovering
- Hiding labels on y axis in Chart.js
- Chartjs change grid line color