How to usetension Property in Chart.js

Approach 2: Using Cubic Interpolation

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=
"https://cdn.jsdelivr.net/npm/chart.js">
      </script>
    <title>Example 1</title>
</head>
 
<body>
    <center>
        <h1 style="color: green;">
          w3wiki
          </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:

How to Get Straight Lines Instead of Curves in Chart.js ?

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.

Table of Content

Using tension Property
Using Cubic Interpolation

Chart.js CDN Link

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Tags:

#Chart.js #Geeks Premier League 2023 #Geeks Premier League #JavaScript #Web Technologies