[Chartjs]-Chart.JS: How to make sharp lines to smooth curved lines

by

15👍

✅

This can be done through the option lineTension that needs to be defined on your dataset. Choose a value below 1.

datasets: [{
  ... 
  lineTension: 0.8
}]

By default, you should however already see curved smooth lines since accoring to Chart.js documentation, the default value is 0.4.

lineTension: Bezier curve tension of the line. Set to 0 to draw straight lines.

Please note that if the steppedLine value is set to anything other than false, lineTension will be ignored.

4👍

you can do it by adding tension value to your charts options

<canvas id="myChart"></canvas>

JS

const config = {
  type: 'line',   // your chart type
  data: data,   // pass here your data
  options: {
    elements: {
        line: {
            tension : 0.4  // smooth lines
        },
    },
  },
};

// pass it like
  const myChart = new Chart(
    document.getElementById('myChart'),
    config
  );

Leave a comment