Smoothing & rounding edges

Line charts

Line charts can be smoothed by setting the lineTension attribute on the dataset. For example:

{
  data: {
    datasets: [
      {
        // ...
        lineTension: 0.4,
      },
    ];
  }
}

Bar charts

A built-in plugin is available to users who want to round the corners of their bar charts. To round corners, set options.plugins.roundedBars to true:

{
  // ...
  options: {
    plugins: {
      roundedBars: true;
    }
  }
}

You may also specify the pixel radius of the rounded corners using the cornerRadius property:

{
  // ...
  options: {
    plugins: {
      roundedBars: {
        cornerRadius: 20;
      }
    }
  }
}

Data smoothing techniques

Methods such as exponential smoothing, moving averages, weighted averages, etc, are sometimes used in statistics and data analysis to remove noise from data.

There are two ways to display smoothed data in QuickChart:

1. Perform smoothing on your data beforehand, and then pass smoothed data to QuickChart. This means you take care of smoothing however you like, on your side.

2. Smooth the data directly in the QuickChart configuration. QuickChart supports Javascript, so you can program smoothing logic directly into the configuration:

Chart URL: https://quickchart.io/chart?c={ type: 'line', data: { labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'], datasets: [ { label: 'Smoothed ...

Open in full editor