How to Get Straight Lines Instead of Curves in Chart.js ?
Last Updated :
10 Jan, 2024
In this article, we will see how we can represent the data on a Line chart in Straight Lines instead of having curves while representation. We will see two different practical approaches with the user interactive examples and their outputs.
Chart.js CDN Link
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Approach 1: Using tension Property
In this approach, we are using the tension property to control the curvature of lines in the line chart. We have taken the button, on which if the user clicks then the tension value becomes 0 (straight lines) and 0.4 (curve lines). By clicking on the button, we can control the curvature of the lines from curve to straight lines.
Syntax:
tension: number,
Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<title>Example 1</title>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Approach 1: Using tension Property
</h3>
<button onclick="straightFn()">
Toggle Interpolation
</button>
<canvas id="chart1"
width="400"
height="200">
</canvas>
</center>
<script>
let useCurves = true;
const data = {
labels:
['JavaScript', 'Python', 'Java', 'C++', 'HTML/CSS'],
datasets: [{
label: 'GFG Courses',
data: [80, 95, 70, 85, 60],
borderColor: 'blue',
tension: useCurves ? 0.4 : 0,
fill: false
}]
};
const config = {
type: 'line',
data: data,
};
const ctx = document.
getElementById('chart1').getContext('2d');
const chart1 = new Chart(ctx, config);
function straightFn() {
useCurves = !useCurves;
chart1.data.
datasets[0].tension = useCurves ? 0.4 : 0;
chart1.update();
}
</script>
</body>
</html>
|
Output:
Approach 2: Using Cubic Interpolation
In this approach, we are using Cubic Interpolation to control the type of interpolation between data points. We have added a button, that allows the user to switch between curves to straight lines) with a single click.
Syntax:
cubicInterpolationMode: 'linear'
Example: Below is the implementation of the above-discussed approach.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<title>Example 2</title>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Approach 2: Using Cubic Interpolation
</h3>
<button onclick="straightFn()">
Toggle Interpolation
</button>
<canvas id="chart2"
width="400"
height="200">
</canvas>
</center>
<script>
let useCurves = true;
const data = {
labels:
['January', 'February', 'March', 'April', 'May'],
datasets: [{
label: 'Website Visitors',
data: [5000, 6000, 5500, 7000, 8000],
borderColor: 'green',
cubicInterpolationMode:
useCurves ? 'monotone' : 'linear',
fill: false
}]
};
const config = {
type: 'line',
data: data,
};
const ctx = document.
getElementById('chart2').getContext('2d');
const chart2 = new Chart(ctx, config);
function straightFn() {
useCurves = !useCurves;
chart2.data.datasets[0].cubicInterpolationMode =
useCurves ? 'monotone' : 'linear';
chart2.update();
}
</script>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...