In this article, we’re going to answer the question of how to Create a Curved Line Graph in chart js. The reason why is because in Chart js one where the default line chart was always set on curved lines and the first one straight line. However, now in Chart js 3, default is always set on straight lines.
Curved Line Graph in chart js
So let’s start and explore how can we get curved lines instead of straight lines using charts. And then what we need to do here as well as to add up the Chart Js library. So let’s get that one as well. you can copy the CDN.
Make sure that this is always above the Chart or the JavaScript code because this code is dependent on the ChartJS library. And what we’re going to do is we’re just going to put in here a Div And then nested the canvas.
<!DOCTYPE html>
<html>
<head>
<title>Chart.js-Curved 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:80%"></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: 'Visitor',
lineTension: 1,//this property is used for setting the line curved
borderColor: 'red',
data: [300, 450, 450, 550, 700, 620, 1200, 1120, 1050, 1159, 1120]
}
]
},
options: {
plugins: {
title: {
display: true,
text: 'Visitor',
}
},
scales: {
x: {
display: true,
title: {
display: true,
text: 'Year'
}
},
y: {
display: true,
title: {
display: true,
text: 'Visitor'
}
}
}
}
};
new Chart("myLineChart", MultiLinechartData);
</script>
</body>
</html>
So the first thing that we need to do is we need to go to ChartJS. What we’re going to do is we’re going to get the basic Documentation of the line chart.
And you’ll see here the options And it has lineTension option here. Let me go down more there you are in the options. We’re going to look for lineTension. Once we are here somewhere down here, the lineTension is by default set from zero. So once we click on lineTension, you will see here a few items.
It is set on zero. This is the default setting. So we say here you can put in here any options. Let me say here put a BJ curve tension. It’s a really top word to say.
Let me say here’s zero. If we do here zero and put in a comma, save that, go back here. Refresh. You can see nothing changed because the default is set at zero. So if you want to have a nice elastic curve, we have to do just 0.4 would be more than enough.
lineTension
You can see. And now as you can see, we can start to get a more elastic style while the tension is just decent. If you put it on one, you will ease the tension so much that it might create weird shapes. As you can see here, it looks like an elastic band has been snapped into two pieces or has been snapped. And what is happening is basically it has no more tension.
Tension is zero. I wonder if you can even extend it to two. Let’s see what happens. There you are. You can see it now the attention doesn’t make sense at all.
So this is of course not really that recommended but I would say within 0.5 or 0.4 should be more than sufficient. From my personal experience, 0.4 is the perfect one. As you can see. You will see here that’s more standard and we can even go or when we decrease the tension more and more to zero when the tension will be as high as possible.
Now it starts to get more straight as you can see if it goes to 0.1, refresh. Here. Now you can see the shape of a straight line while there are still just very tiny rounded edges here, curves making the tension still a little bit elastic.
And eventually, if you put in zero, of course then we go back to the straight line and now you can see here very solid sharp edges. This is basically the way how you can do in charge of how you can increase or decrease the tension.
I would say to get rounded curves, 0.4 is more than sufficient. Thank you for watching this video and I hope you enjoy it. And if you enjoyed this video, you probably will enjoy this one as well. And if you’re interested in charges, check out in the description box link directing to my charges course where you can learn everything about charges, and finally of course make sure you subscribe to my channel.
The post How to Create Curved Lines Instead of Straight Lines in Chart.js? 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
- localstorage value is changed on page refresh
- jQuery incompatibility with Firefox
- How to get first pick at keydown (preventing "add bookmark" dialog from showing)
- jquery clone multiple instances why
- making sure my array of random values doesn't contain duplicate values
- offset not changing after jQuery animation
- jquery to scroll down of section's height with page down key
- How to change ul list items from another onclick with jQuery?
- Full screen overlay menu scrollable
- Complicated jquery syntax I don't understand
- Showing a loading message whilst JavaScript code is running
- inconsistent jquery behaviour
- 2 JSONP Requests Called. 1 Works, But Another Returns Parsererror
- double actuating onblur event
- How to scrollTop an iframe in Adobe Muse?
- Dialog not centered on window height, but on document height instead
- Image as cursor, should move when you scroll
- Disable all SELECTs with jquery?
- jQuery autocomplete cross site domain - listbox does not display
- Within a multi select, I need to be able to get the value of the currently selected option
- Click event that calls a function
- understanding event handlers
- How can I limit a textbox to have less than 3 commas in it?
- How to simulate multiple keypress event at the same time
- jQuery selection within selection
- jQuery send more then one formdata
- How to submit only one of hide/show fields data when required - Laravel
- php echo() function in jquery/javascript?
- Store positioning information from each element (JQuery/Javascript)
- Table heading not getting downloading in csv format using jQuery data table
- How to make text type itself with jQuery?
- how to change the combo box to text when i select other in anyone of <td>
- Uncaught TypeError: Illegal invocation error while sending data from ajax
- Find out if last div is visible and then disable next button?
- Javascript/jquery - onclick of a button
- the value 'xx/xx/yyyx' is not valid for "y" - jquery datepicker datetime
- Which templating framework should I use in a PhoneGap application using JQuery Mobile
- Unable to calculate textfield values
- Disabling animation for filtering the Column in KendoGrid
- create sequence steps [animation] with JavaScript or jQuery
- Can't call functions from first included javascript file from the second included js file
- Changing image when accordion is collapsed/expanded
- Trigger clipboard.js parent
- handsontable doesn't work with IE and Chrome
- Add Text At Location from indexOf
- Twitter bootstrap table with jquery animations
- Get value of type=text which is inside table
- "this" in jQuery $(selector).each function refers to page
- jqplot group and label several data series with the same name and color
- Getting all nodes inside a tag
- Why jQuery event not firing when outside ready function, even after document is ready?
- CSS - Stop table cell background overflowing outside of its width/height
- Replace content of a web page with stuff from AJAX response
- stop event execution on datatable pagination click
- get JS to load on JQM page
- Selecting element by id from jQuery collection
- Remove Duplicates From Comma Delimited String
- highcharts gantt display as bar instead of lines
- Drag and Drop into another div and move in the div only using jquery
- lost events delegation after remove(), apendTo() and apend()
- What is the purpose of `complete` argument?
- Individual jquery actions for each div
- Sum of all values in a class tag
- Disable percent stacking on legendItemClick in percent stacked column highchart
- Create column span when booking timeslot
- display bootstrap dropdown-menu to orient the list to the left instead of right
- Jquery animate.({opacity} not running at all
- Post Excel file through AJAX
- Optimize SVG game
- Is there any way to load data while scrolling in jquery for Iphone (mobile websites)
- datatable column.search() is not filtering my table using
- what is the difference between these pattern of jquery defered call?
- jQuery script for choosing rating
- How can I add the 'required' attribute to input on change of textarea?
- Setting hidden value from button click
- Yahoo YQL RSS - Bad Request
- jQuery unbind event for time
- How can I apply some jquery stuff only based on header row
- jQuery target anchor tags inside unactive tabs
- How to set maxDate is last day of december on current year?
- Switch case of buttons selection in jQuery or Javascript
- Stopping content script in chrome extension
- weird behavior when writing numbers in the console
- Rotate images with javascript
- Slides flickering after end loop in Swiper Slider
- Find the closest combination of two related numbers in a multidimensional array
- How to detect/select elements created from JavaScript/JQuery?
- Where can i get offline jQuery 1.7 API dump
- Animated progressbar list Counter only count last aria-valuenow
- error in hide or show div on click on span
- How to fit image in td html css / dompdf
- Javascript can not change CSS color
- Block "Confirm Form Resubmission"
- Jquery, get position of element inside overflow:hidden
- Styling jQuery script output
- ajax error in wordpress plugin
- Update default value of multiple html elements
- checkbox value displaying twice
- Hide table row(s) in twig with symfony
- image checkbox form with jquery
- Handlebars, how to set a condition for a value returned by a helper
- PHP !isset() and empty() returns true for AJAX post data even if it is set
- Sorting table with just jquery, no other plugins
- Jquery striped rows
- Render partial with refreshed data via AJAX
- Get checkbox value on form submit and store in a variable using jQuery
- Can I add event listener on the site that is not mine?
- Javascript easelJS animation while holding key down
- Javascript Menu : Click on to extend & Click off to shorten
- Loading AngularJS app within KnockoutJS app as iFrame
- plotly: removing plot and creating a new one in the same div
- jQuery .ajax call shows success when computer disconnects. How to induce ajax error state?
- How can I enable scroll-bar only when window is resized smaller?
- Prevent iframe keyboard event from scrolling the holding page
- How can I put a span tag around some text in a code tag?
- Unordered list and dynamic bullet images
- Push Value of attribute in array
- Return Value for Parent function from sub function
- Jquery - Display value of user input live
- Expect Object but get String when parsing JSON
- How to make thumbs 70% bigger on hover with jQuery
- What about variable scopes inside a callback function
- When Jquery jScrollPane is reinitialized, it goes back to the top. Why?
- Adding jQuery delete confirmation box in existing hide-function
- Fold/unfold div in table?
- nth-child(2n) CSS after hidden tr
- Converting JSON data before displaying in HTML
- jQuery selecting divs when there are 2.
- Combination of word as a autocomplete suggest once that word is selected
- Disable drag bubbling for nested sortable items in jQueryUI
- Press a button on a webpage using VBA and without opening IE
- How Can I use owl carousel with angular.js directive?
- How to rerender data in a javascript table orderd by a specific column
- Set active slide in modal click on Swiper slider
- Shadowbox not working after ajax load data
- javascript convert string to array with checkbox for each array
- jquery check a number onBlur
- JQuery .Ajax returned data as Object not HTML
- jQuery get content of all the span's before and after the selected
- Jquery UI Datepicker adds a month to minDate and maxDate
- How to delay a function from returning until after clicks have occurred
- JQuery AJAX Caching with PHP file
- jQuery is not defined in Chrome's javascript console
- Finding divs by 2
- Display bootstrap modal only for mobile and not for desktop
- Animate Image on scroll on line in bootstrap
- How to print Html page with image using Javascript
- Typography Effects not working properly on IE9
- IE does not retain deleted DOM
- `ie9` - contenteditable false not working when parent editable