In this article, we will discuss How to make sharp lines to smooth curved lines using Chart JS. If you are new at charts js and you are looking for converting this graph to a smooth line chart then you have come to the right place.
If you take the default example from the chart js then you will get the sharp lines but our requirement is to make it smooth curve lines using chart js.
we can easily achieve this task using the option lineTension that needs to be defined on the line chart dataset. set a value below 1.
lineTension
: Bezier curve tension of the line. Set to 0 to draw straight lines. Source: Chart Js Documentation
Make Sharp Lines to Smooth Curved Lines
<!DOCTYPE html>
<html>
<head>
<title>Set Different Color For Each Bar based on value Using chart.js</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="linechart" style="width:80%"></canvas>
</div>
<script>
var LineChartData = {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"June",
"July",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
datasets: [
{
label: "sales",
borderWidth: 2,
backgroundColor: "blue",
borderColor:"red",
lineTension: 1,
data: [42, 56, 9, 52, 66, 87, 51, 42, 32, 88,150,125]
}
]
};
const config = {
type: 'line',
data: LineChartData,
options: {
scales: {
y: {
beginAtZero: true
}
}
},
title: {
display: true,
text: "Smooth curve line chart"
}
};
window.onload = function () {
new Chart("linechart", config);
};
</script>
</body>
</html>
sxds
The post [Chart JS]- How to Make Sharp Lines to Smooth Curved Lines? appeared first on Software Development | Programming Tutorials.
Read More Articles
- Fetch and display data from API in React JS using Axios
- CRUD operation in React JS using Hooks
- Crud operations in React Js with Axios and Rest API
- React Js- Fetch data from API with params
- React Js-Fetch data from API in functional component
- React Js- Fetch data from API using hooks
- React Js- Fetch data from API on button click
- [Simple Way]-Fetch data from API and display in table React Js
- Inline table editing with edit and delete icon in React Js
- [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
- How to leave just points without lines in ChartJS
- How to Create Curved Lines Instead of Straight Lines in Chart.js?
- [Chart Js]- Straight Lines and Curves Lines in the Same Graph
- [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?
- How to Create a Stacked Bar Chart Using Chart Js Example?
- [Simple Trick]-In Chart.js set Chart Title, Name of X axis and Y axis
- [Chart JS]- How to Make Sharp Lines to Smooth Curved Lines?
- [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
- React Js-Insert Update Display Delete CRUD Operations
- How to Pass Data From One Component To Another In React Js
- What is Components in React Js?
- Air Conditioner Power Consumption Chart | AC Electric Bill Calculator
- Wire Gauge Size Chart
- Set height of chart in Chart.js
- Dynamically update values of a chartjs chart
- Chart.js v2 hide dataset labels
- How to display data values on Chart.js
- Chart.js : straight lines instead of curves
- How to add text inside the doughnut chart using Chart.js?
- How to clear a chart from a canvas so that hover events cannot be triggered?
- In Chart.js set chart title, name of x axis and y axis?
- Limit labels number on Chart.js line chart
- Different color for each bar in a bar chart; ChartJS
- How to use two Y axes in Chart.js v2?
- chart.js load totally new data