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
- Rangy (JS/jQuery) split node
- Inline script rendered as text content
- select box value not setting on bootstrap modal
- Can I load external stylesheets on request?
- Move 2 DIVs (Login link & Shopping Cart) to last list item using jQuery
- Get specific part of external webpage through ajax which has http auth
- Search on Click with Jquery's Autocomplete
- Meaning of === with function call
- Backbone Marionette - throws error on call of Layout extend
- How to navigate textboxes in between different tables using arrow keys?
- How to call a PHP file from HTML or Javascript
- Validation in Bootstrap wysiwyg5 editor
- Converting Datetime C# type to Date javascript in asp.net mvc razor application
- ReferenceError: $ is not defined when debug
- How to handle Javascript errors when also using jQuery?
- Can't change z-index with JQuery
- Jquery block UI when ajax starts
- Disable all target="_blank" links on page
- Why does the following way of creating DOM elements not work with jQuery in IE7 and IE8?
- HTML tooltip cleanup in d3.js
- how to zoom content in iframe to fit my page size
- Is there a way to get jQuery's .on() functions to play nice with promises?
- JQuery Get user selected value from select list when using default select=y
- How to determine where a mouse exits an image
- Backbone.js PushStates: Fallback for Internet Explorer not working
- Slick Slider - How to Remove Specific Slides On Click
- autocomplete showing self.element.propAttr error
- Unable to dynamically use Font Awesome icon in submit button
- getElementsByClassName is not a function javascript
- SignalR MVC 5 Websocket no valid Credentials
- Jinja-like JS templating language
- Jquery Ajax url path Issue
- How to check if a div has an svg in it using JavaScript?
- Ajax call is not going through the withFormat->json on GRAILS controller
- How to make file upload field mandatory
- get next week start and end using jquery and moment js
- will there be a jsMath-like library or plugins in jQuery?
- What is the impact of the breaking change in jQuery 3.5.0?
- Vanilla alternative to jQuery $.data() function: any native javascript alternative?
- jQuery get value of n-th element
- $(function) gets called twice in Rails 3.2.1 App
- why my jquery script doesn't work in my include php file?
- requireJS with Backbone dependencies
- Dialog box if there is no internet connection using jquery or ajax
- How to create continuous scrolling content using Jquery .animate() function?
- Using Bootstrap Tooltip with SVG Object - Not Displaying Despite specifying Container
- Select an element with random ID via JQuery
- simulate background-size:cover on <video> or <img>
- Format JSON on form submit
- How to subtract text with jQuery
- index returning -1 jquery
- jScrollPane scrolling amount
- Moving HTML element to bottom by using jQuery
- jQuery keypress/keyup/etc events not fired when select box is expanded
- jquery selector - selecting all span tags with id not equal to something
- How to add doctype in html page using JavaScript or jQuery
- Cancel functionality in a href
- jQuery Datatables reorder columns from ajax source
- Appending a new textbox onclick of button
- datepicker minimal year
- Show page once FULLY loaded with Turbolinks
- How to select a td from a table with id using jQuery
- Always on top div within area
- how to get last logged in admin time and date after login me in php
- global or local variables in a jquery-plugin
- jQuery: performing some action before form is submitted
- JQuery drop list item in menu
- changing the values of height attribute of table cells using jquery or javascript
- Replace <br /> in a textarea with a line separator ( Javascript )
- How to scroll LI items in a fixed height UL?
- Jquery Check if Paragraph is empty
- jquery datepicker changes year when user changes month
- Prepend Subfolder to All Links with jQuery
- Calling WordPress Gallery Uploader/Selector From Metabox
- With jquery ui draggable, is it possible to have different scrollsensitivity vertical versus horizontal?
- How to choose elements but exclude first and last elements
- How can I add a list item in order using jQuery?
- Find all textfield using JQuery
- Jquery removeClass doesn't remove associated styles
- how to create a box similar to stackoverflow, click to dismiss
- Why declare inside of $(function () { ... })?
- Twitter Bootstrap modal window flickers
- how to call js function without event
- How does jQuery accomplish its asynchronous animations?
- How to call Bootstrap alert with jQuery?
- How to Scroll Down - JQuery
- ajax jquery support in spring mvc
- Set focus of codemirror instance based on container
- sourceMappingURL from jquery generates 404 error in apache
- Click event on highchart axis
- Using jquery or JS how do you turn a string into a link?
- jQuery - change text on button hover
- Using jQuery to get the next or previous element from a selection
- Add more (sets of) fields to form by jQuery
- Select2 jQuery Plugin: Is there a way to sort a list of tags alphabetically?
- Create new array from an existing array attributes
- New Chrome behavior: clicked element stays where it is and document scroll position moves when new content loaded
- Hide html only when Javascript is available
- How to access the content of an iframe with jQuery?
- jQuery.after() does not work as expected
- Is there an implementation of a ribbon in jQuery?
- No POST data in jquery ajax call
- How do you remove a class that matches a pattern from the class attribute, but retain the other classes?
- jQuery call function if object with specific class clicked?
- Clear select2 without triggering change event
- Prevent user hitting Enter except Textarea
- execute javascript before dom is loading
- D3.json setup cache to false
- customize highcharts tooltip to show datetime
- html5 meta charset-utf-8 not working
- How to make object rotate with drag, how to get a rotate point around the origin use sin or cos?
- JQuery Callback with arguments - newbie
- jQuery Each Function Inside a jQuery Each Function
- Trouble with syntax of adding setTimeout to existing jQuery script
- Troubleshooting ASP.Net caching - CacheDuration property seems to have no effect
- scroll loop inside div
- Dialog Click listener not triggering in IE8 or Firefox with jQuery
- Right-align dropdown menu in select2
- Select box not refreshing on emptying, then adding back options
- is there a way to disable 'tab' on a input type='text'?
- jquery draggable enable and disable
- Test if children contain specific text with jQuery
- Algorithm to get a point in a diagonal segment
- jquery ui out: function not triggering
- Bootstrap multiselect dynamically selecting dynamically added fields not working
- Rewriting jQuery to plain old JavaScript - are the performance gains worth it?
- Unwanted underscore and unix timestamp appearing after javascript include
- In jQuery, how to set the position of a element in percentage?
- how to make the dropdown autocomplete to disappear onblur or click outside in jquery?
- jQuery - How to brighten an image
- jquery Uncaught SyntaxError: Illegal break statement
- Add attribute in in Javascript
- using .next() to find a div and .append() to append back to the first?
- jQuery Ajax post for newbie
- JQuery / ASP.NET newbie questions about <asp:Button>
- How to unload jquery ui tabs that are hidden/ not active?
- Need to add an <li> at the end of each ul on a page
- Overlapping data lines with Flot Javascript plotting library
- find select option by text
- select2 is not showing arrow down icon
- Preventing orphans
- My promises no longer working in jQuery 1.8
- Post serialized form data and extra variables using JQuery
- this and $(this) in widget
- How can I create an efficient infinitely looping waving text animation?
- Is there an equivalent of jquery .empty() in d3?
- jQuery index selectors
- Get the hash value which was before hashchange
- jQuery each letter in div element, random colour from array on hover
- JQuery - Can we capture both the p and div tags at a time in a single sentence using jquery?