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
- Intro.js doesn't skip over hidden element
- Why is one of the selectors in Flexslider working and the second one isn't?
- Is there a way to designate some HTML content as not managed by jQuery?
- how to remove bug character in html using jquery
- Smooth scroll to div element within div using jQuery
- What is the new lightbox hotness?
- Where can I find a list of properties for 'item' in plothover function?
- Jquery Image lost on fade, help!
- Jquery and Ajax internal server error 500
- add delay on hover - menu jquery
- Multiple Google Maps directions requests returning last response for all requests
- Edit picture on the web and export as image
- How can I create folder on localhost using jQuery and insert imageData as Image at that folder?
- function doesn't deduct the first value
- How to add check box with bulk action like CRUD for multi rows in admin panel
- jQuery animate does not work(margin-left -200 to margin-left +200)
- get top left pixel color of remote jpg image
- jquery form serialize - not passing a thing...but console.log fine
- jQuery Mobile 1.4.0 split button, right button only CSS
- jQuery Knob hover animation
- How to use string without double quotes around it via Javascript?
- Carousel with progress bar - jQuery width issue
- Search dynamically created HTML table for checked boxes
- jQuery: Compactly function window.resize (doesn't repeat)
- How do I choose an <option> twice on a <select> element (API)
- how do i defer loading certain images so the page loads faster?
- How to make countdown time not back to default time if page refresh
- jQuery run ajax when span value changes
- A specific input validation in jQuery connected to radio buttons
- How to use jQuery Validation plugin on button click
- Have to press Enter (or button) twice before anything is submitted
- select all option A radio buttons with javascript
- Order HTML elements on page alphabetically by ID
- Getting range from content editable div in Firefox does not work
- Trying to prevent modal close on button click - javascript
- Undefined jQuery error on remote validation
- jquery my else if part not working... what is wrong?
- Adding required tag to each select element created
- fixed element in responsive layout
- Button disable when no checkboxes are selected in jquery
- Include Wordpress' jQuery UI to my plugin
- GoogleMap: move up TypeControl buttons from BOTTOM_CENTER position
- Refresh part of page using jQuery on window resize
- Entire php file returns to datatable ajax call
- Binding selectable options to drop down list
- append button value or remove it from a div when it is checked / unchecked
- Appending text to the body background image with fadeToggle() effect
- Froala Editor how save content to textarea before send form
- Using jQuery to fade between two divs, images work, iframes don't
- Jquery get data from JSON (undefined)
- From JSON to grouped ul
- Why does bootstrap modal close event "stack"?
- How to drag and drop ONLY if there is no child in droppable div?
- Jquery to get an instance and write it to input field
- Convert json to html table output in javascript/JQuery
- How (or is it necessary) to convert a Javascript Object to Dom
- Mutually exclusive checkbox logic
- How to find attribute on a row table using jquery
- Adding Class to Anchor
- Second JSP page is not getting loaded after a AJAX POST request
- How To change the dataSrc attribute of rowReorder dynamically
- Submit button on mobile devices not unfocusing after click
- Jquery dynamic background image url does not work
- Possible to print list items hidden by Jquery "slideup" function
- Help in placement on controls in UI
- When should I use $.getJSON.done() instead of $.getJSON()?
- jQuery event on form field
- Prevent unobtrusive validation on specific form
- js not passing form data for php mail
- event.preventDefault(); navigation whilst still allowing back & forward buttons to be used
- Error with Firing Events from Functions
- deleting elements created by jquery in a sequence
- Need Example of Using JQuery with Shopify to Create Collection and Use Returned ID to Add Products
- Change the style of CSS several times
- Automatically encode form input to JSON with native datatype
- JQuery sortable with centered elements?
- JSON.Parse causes error in javascript
- How to add fixed variable name with changing variable name
- Yii 2 and jQuery
- How to duplicate an object in a card by a button
- Retrieve the option name instead of the value in Local Storage JavaScript when using Select2 widget
- $(document).on('click', '#preparingforimport', function() used the first selected filter attribute value
- Prevent ajax post when back button is pressed
- Attach callback to multiple jquery promises
- Serialize multiple select boxes for Ajax POST
- Jquery add class remove class not working on div
- How to prevent a class from remaining active when stop() cancels the animation?
- How to query web server for existing text within a web page?
- Alignment issues with masonry
- apply css to grandparent div when slide is active
- Set of images stacked with offset increase for each
- DIV moving up and down using javascript
- load specific div from external webpage
- jQuery and localstorage
- How to use jQuery object for a select box
- jQuery if statement for two select items
- How to enable popup windows to appear in a certain location on a web page
- selecting, changing css of multiple table cells
- CSS-animations and Z-index
- Multiple series of data in Highcharts but second line graph is displayed squashed?
- Loop through objects from fetch response
- newline markup in textarea
- js click onpage load based on referrer
- How to add event addListener click on marker after search place on Google Maps
- JavaScript code on rails console
- 1 html object - different functionalities (one-click and double-click)
- jquery Cropper getData function is returning an object instead of a data:image
- Flask-JQuery Value not receiving in Server
- Change background-image dynamically every second
- remove node from nodelist jquery
- Ajax disabling jQuery plugin in Rails
- Check inputs with same value?
- slideDown and Up for several <li> elements at the same time
- How to build jQuery remove
- Button Click Affects all Buttons
- Cannot insert html after placing less-than signs in it
- Amount to always show 2 decimal places
- Display fancybox on page load per session
- How can I manipulate just the color of a -box-shadow with jquery?
- Update Series Array on HighChart after editing the chart
- Push different data to array depending the value of a slider
- How do I use a block-level element as a background
- AJAX to check the login name exists or not
- Wordpress AJAX request on admin-ajax.php gives error 400
- jQuery fire function after another script is complete
- Pulling pdf BLOB from database using php and displaying it in a html page not working
- jqplot does not work well in IE7
- Content after flexslider does not move up when the slider resizes to smaller height
- How to make certain elements unobtainable with jQuery
- jQuery Flot Pie Chart Doesn't Show
- Trying to cycle through a group of radio buttons with Jquery using swipe
- datepicker date is not accurate in ipad
- How to add elements to an specified position without influence of other elements?
- Updating the dynamic PHP in a jQuery Mobile site after updating the database
- Create object with random key jquery
- jquery menubar - jquery,javascript,css
- Why Dialog is not opened when button is clicked?
- jquery - Form input not saving
- Uncaught Error: Syntax error, unrecognized expression: '.b-brand-box'
- Masonry style responsive layouts
- find selected value of dropdown in every row of table
- Light-box display error
- jquery validation and getting errorLabelContainer/wrapper to work with custom validation labels
- Fold out effect for list items on hover one after the other
- Jquery Load more and hide button
- How to Parse json output from URL
- How to hide redundant french content in js?
- jQuery Delay for non-effects?
- How to assign the elements of a dictionary to a jquery table?
- how to get the previous form object using jquery