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]-Cascading DropDownList in Asp.Net Mvc Using Jquery Ajax
- jQuery Ajax GET Example with Parameters
- How to Pass Parameters in AJAX POST?| JQuery Ajax Post Json Example
- [Simple Way]-How to get data from database using JQuery Ajax in asp net MVC
- How to add, edit and delete rows of an HTML table with Jquery?
- Registration form with image upload in MVC using jquery Ajax
- How to make an Inline editable table in MVC using jquery?
- Insert Update Delete Using Jquery Ajax and Modal Popup in Mvc
- [Solved]-How to Upload pdf file using jquery MVC?
- Dynamically creating graphs with jQuery
- Unable to populate telerik dropdown list using jquery
- $().bind not working without document ready
- Sort original table in descending order
- jQuery: link to an anchor (hidden div) and show?
- Detect user has scrolled past first section
- How to perform multiple events CSS
- Jquery Draggable Sortable write into correct Input, get child element not working
- How to pass dymanicaly generated reults into a print friendly new window
- Placing the errors in its respective div
- assign CSS through jQ - syntax
- Get attributes of child inputs of elements in .each() inside another .each()
- How to use window.onscroll with Mobile Browser
- jQuery Ajax return multiple data
- how to use clearTimeout to make the page work
- Why is my if/else...if statement not working?
- How to create jquery data table from JSON array without declaring columns
- jQuery and Drupal behavior issue on document.ready
- For Each Loop append div
- jQuery select/deselect all and individual checkboxes within closest table
- To find if a button is selected
- Searched / Tried a lot: Unable to add popup display delay
- Adding a class to portfolio items to style every third item
- Schedule Javascript/jQuery functions throughout the day
- jQuery Replace Part of URL
- make a new DOM object a button in jquery ui
- Select only value attribute which have numbers in it
- jQuery Cycle addSlides "alt"
- Custom JavaScript Object key
- Download Image through Firefox Using Javascript?
- javascript click a button using a script
- preventDefault() doesn't prevent form from being send
- Simultaneously scroll three iFrames containing PDF files
- Add a click functionality to sidebar without affecting its toggle feature
- JQgrid sort by date that is sent as string by server
- disabling struts2 jquery datepicker button image
- capturing and adjusting posted values in firebug
- I want to change the value of my input field based the value of my dropdown. But both should have different values
- jQuery dynamic element - styling not being applied
- hide div (it contains only script tag)
- Optimize/make better JQuery code for images slider
- Using JavaScript to swap between two unique DIVS using display
- jQuery for disabling the click
- setTimeout() function isn't working
- Jquery setdate sets date less than one than the actual selected date
- html5 card matching game - can't separate images from a sprite
- Using Jquery hover event to change css when mouseIn or mouseOut
- jQuery compare object always resulting false
- What's wrong with this jQuery click function?
- how to remove code behind CSS using jquery?
- Date Convert in jquery
- Opera: weird problem jQuery fade effect
- Using Multiple Angular.js Controllers on same DOM
- jQuery: find a div containing part of the URL and add ID to div
- Positioning a div using JQuery
- on click event firing but ajax not happening
- How to make a custom attribute only apply to one element?
- add remove class jquery not working
- How to handle a POSTed JS array in Pyramid
- Posting user entered text using $.ajax, how to pass text content in the data property?
- GET key value from AJAX response
- How can i change the Effect of slicder from Fade to some other transition without delay jQuery
- Problem adding options to a drop down list using jQuery
- How to submit AJAX forms with user clicking enter?
- How to float divs top to bottom with jQuery like the new layout for myspace.com?
- Jquery append html file many times with passing parameters
- Best way to Load other asp.net web pages in Ajax Modal Popup using jQuery
- Ajax call always returning error from mvc action even though it works fine
- Get img tags which have the same src and rel in jQuery
- How to use Hover and click using Jquery
- Value of set of input tags in a JS array
- Why does my input type image do a postback
- Convert model to array mvc 3
- Webservice throws 500 error from AJAX, but not when called directly
- extract single variable from JSON array
- How to properly use AppendTo with Draggable() in JQuery ui?
- Function only working once
- How to extract a specific input field value from external webpage using Javascript
- JQuery round corner merging divs
- Jquery adds "?" on URL
- How i can detect when input values are change using Jquery
- Simple jQuery show modal and print a print function while selecting a div
- how generate only darken random colors in javascript?
- Differentiate between javascript file and libraries (like jquery etc)
- AJAX POST return data not appearing
- Dynamically added child element's event listener tagged to Parent also
- jQuery each for collection of strings
- Jquery.Validate not working for file upload
- How to append input value with ,(comma) when li click?
- Clean URL by removing one paramater and its value
- Jquery toggle and add/remove
- Length in Datatable is not shown correctly
- Not sure how to add Javascript code to Tumblr
- Using jQuery JSON function to populate textarea when a specific dropdown item is selected
- Easy infinite scroll jQuery with Ajax
- jquery using data for cross-function variables
- How to use the timer in javascript?
- Why does `$(item).width()` return `0` even though elements exist?
- selector in Javascript
- How do I perform an action on mousedown when a certain element is NOT clicked
- jQuery append html element but with a different class name each time
- What is the difference of returning a promise() or a deferred in jQuery?
- Progress Bar Issue (using onloadstart, onloadend, onloadprogress)
- Identify video area in flash using javascript
- really simple javascript to remove value in text box
- How to show flash message after ajax success in laravel?
- How to animate when span7 and span5 show hide in bootstrap
- How can I make this jQuery work in IE explorer?
- How do I perform 2 AJAX requests on one form submit?
- Batched updates support in dojo dgrid or slick Grid not available
- JQuery UI Autocomplete multiple values
- Jquery: Toggle not working
- jquery load xml and set colors for negative and positive values
- Adding instance methods in jQuery plugin
- Creating a Jquery Fade effect
- Slide div up before sliding next div down?
- HTML5 Video: autoplay not working in lightbox
- unable to access post request params in golang
- Calling the function using jquery
- `serializeArray()` not getting all fields
- Pass Info to form input when link is clicked
- Coffeescript: how to link div, but override link if child links are clicked
- Set more than one containment in jQuery Draggable
- Problem with jQuery live and IE
- HTML just cannot get focus instead of disabled
- Jquery IF Statement Less Than issue
- Include javascript libraries scoped
- Select Option Value comparing giving the wrong result
- Event handler preventing submit
- Getting animate() to account for CSS padding
- jQuery Overlay Image on HTML5 Video
- PHP jquery ajax unlink images from folder not working
- Prevent browser from vertical scrolling after clicking <a href="#divID">
- How to temporarily enlarge font size on hover using jQuery
- Cakephp 2.4 JSHelper Confirm to use Dialog instead of Javascript Confirm
- How to generate rowspan with jQuery?
- How to toggle two images when clicking on the parent element?
- asp.net jQuery JSON autocomplete
- How do I close a jquery dialog with a class?
- Getting navigation to display the selected page
- Select script tags from jQuery get response
- Making text bold in jQuery
- Jquery $.get() and $.ajax() don't get same result
- jQuery $(window).resize not firing within jQuery plugin
- Argument of type '() => JQuery<HTMLElement>' is not assignable to parameter of type
- jQuery Code runs no matter what
- How GET works with AJAX
- jQuery Each function iterates over everything despite if statement
- Appending </tr> tag in a table is not reading
- Jquery mobile swipe between pages with "bubble buttons"
- Resetting Jquery Select2 Multiple dropdownlist causes a blank item to be selected?