Line Interpolation / Smoothing

Two series with large jumps, drawn with simple smoothing instead of a cardinal spline.

src/main.ts

import 'chartist/styles.css';
import { lineChart, Interpolation } from 'chartist';

lineChart(
  '#chart',
  {
    labels: [1, 2, 3, 4, 5],
    series: [
      [1, 5, 10, 0, 1],
      [10, 15, 0, 1, 2]
    ]
  },
  {
    // Remove this configuration to see that chart rendered with cardinal spline interpolation
    // Sometimes, on large jumps in data values, it's better to use simple smoothing.
    lineSmooth: Interpolation.simple({
      divisor: 2
    }),
    fullWidth: true,
    chartPadding: {
      right: 20
    },
    low: 0
  }
);

import 'chartist/styles.css';
import { LineChart, Interpolation } from 'chartist';

new LineChart(
  '#chart',
  {
    labels: [1, 2, 3, 4, 5],
    series: [
      [1, 5, 10, 0, 1],
      [10, 15, 0, 1, 2]
    ]
  },
  {
    // Remove this configuration to see that chart rendered with cardinal spline interpolation
    // Sometimes, on large jumps in data values, it's better to use simple smoothing.
    lineSmooth: Interpolation.simple({
      divisor: 2
    }),
    fullWidth: true,
    chartPadding: {
      right: 20
    },
    low: 0
  }
);

Live

Open in the playground View as MarkdownSwitch to 1.x above the code to see the same chart written with the Chartist 1.x classes.