Namespace: Interpolation

Interfaces

• CardinalInterpolationOptions
• MonotoneCubicInterpolationOptions
• NoneInterpolationOptions
• SimpleInteractionOptions
• StepInterpolationOptions

Functions

cardinal

▸ cardinal(options?): (pathCoordinates: number[], valueData: SegmentData[]) => SvgPath

Cardinal / Catmull-Rome spline interpolation is the default smoothing function in Chartist. It produces nice results where the splines will always meet the points. It produces some artifacts though when data values are increased or decreased rapidly. The line may not follow a very accurate path and if the line should be accurate this smoothing function does not produce the best results.

Cardinal splines can only be created if there are more than two data points. If this is not the case this smoothing will fallback to Chartist.Smoothing.none.

All smoothing functions within Chartist are factory functions that accept an options parameter. The cardinal interpolation function accepts one configuration parameter tension, between 0 and 1, which controls the smoothing intensity.

Example

const chart = new LineChart('.ct-chart', {
  labels: [1, 2, 3, 4, 5],
  series: [[1, 2, 8, 1, 7]]
}, {
  lineSmooth: Interpolation.cardinal({
    tension: 1,
    fillHoles: false
  })
});

Parameters

Name	Type	Description
options?	CardinalInterpolationOptions	The options of the cardinal factory function.

Returns

fn

▸ (pathCoordinates, valueData): SvgPath

Parameters

Name	Type
pathCoordinates	number[]
valueData	SegmentData[]

Returns

SvgPath

Defined in

interpolation/cardinal.ts:33

---

monotoneCubic

▸ monotoneCubic(options?): (pathCoordinates: number[], valueData: SegmentData[]) => SvgPath

Monotone Cubic spline interpolation produces a smooth curve which preserves monotonicity. Unlike cardinal splines, the curve will not extend beyond the range of y-values of the original data points.

Monotone Cubic splines can only be created if there are more than two data points. If this is not the case this smoothing will fallback to Chartist.Smoothing.none.

The x-values of subsequent points must be increasing to fit a Monotone Cubic spline. If this condition is not met for a pair of adjacent points, then there will be a break in the curve between those data points.

All smoothing functions within Chartist are factory functions that accept an options parameter.

Example

const chart = new LineChart('.ct-chart', {
  labels: [1, 2, 3, 4, 5],
  series: [[1, 2, 8, 1, 7]]
}, {
  lineSmooth: Interpolation.monotoneCubic({
    fillHoles: false
  })
});

Parameters

Name	Type	Description
options?	MonotoneCubicInterpolationOptions	The options of the monotoneCubic factory function.

Returns

fn

▸ (pathCoordinates, valueData): SvgPath

Parameters

Name	Type
pathCoordinates	number[]
valueData	SegmentData[]

Returns

SvgPath

Defined in

interpolation/monotoneCubic.ts:33

---

none

▸ none(options?): (pathCoordinates: number[], valueData: SegmentData[]) => SvgPath

This interpolation function does not smooth the path and the result is only containing lines and no curves.

Example

const chart = new LineChart('.ct-chart', {
  labels: [1, 2, 3, 4, 5],
  series: [[1, 2, 8, 1, 7]]
}, {
  lineSmooth: Interpolation.none({
    fillHoles: false
  })
});

Parameters

Name	Type
options?	NoneInterpolationOptions

Returns

fn

▸ (pathCoordinates, valueData): SvgPath

Parameters

Name	Type
pathCoordinates	number[]
valueData	SegmentData[]

Returns

SvgPath

Defined in

interpolation/none.ts:24

---

simple

▸ simple(options?): (pathCoordinates: number[], valueData: SegmentData[]) => SvgPath

Simple smoothing creates horizontal handles that are positioned with a fraction of the length between two data points. You can use the divisor option to specify the amount of smoothing.

Simple smoothing can be used instead of Chartist.Smoothing.cardinal if you'd like to get rid of the artifacts it produces sometimes. Simple smoothing produces less flowing lines but is accurate by hitting the points and it also doesn't swing below or above the given data point.

All smoothing functions within Chartist are factory functions that accept an options parameter. The simple interpolation function accepts one configuration parameter divisor, between 1 and ∞, which controls the smoothing characteristics.

Example

const chart = new LineChart('.ct-chart', {
  labels: [1, 2, 3, 4, 5],
  series: [[1, 2, 8, 1, 7]]
}, {
  lineSmooth: Interpolation.simple({
    divisor: 2,
    fillHoles: false
  })
});

Parameters

Name	Type	Description
options?	SimpleInteractionOptions	The options of the simple interpolation factory function.

Returns

fn

▸ (pathCoordinates, valueData): SvgPath

Parameters

Name	Type
pathCoordinates	number[]
valueData	SegmentData[]

Returns

SvgPath

Defined in

interpolation/simple.ts:31

---

step

▸ step(options?): (pathCoordinates: number[], valueData: SegmentData[]) => SvgPath

Step interpolation will cause the line chart to move in steps rather than diagonal or smoothed lines. This interpolation will create additional points that will also be drawn when the showPoint option is enabled.

All smoothing functions within Chartist are factory functions that accept an options parameter. The step interpolation function accepts one configuration parameter postpone, that can be true or false. The default value is true and will cause the step to occur where the value actually changes. If a different behaviour is needed where the step is shifted to the left and happens before the actual value, this option can be set to false.

Example

const chart = new Chartist.Line('.ct-chart', {
  labels: [1, 2, 3, 4, 5],
  series: [[1, 2, 8, 1, 7]]
}, {
  lineSmooth: Interpolation.step({
    postpone: true,
    fillHoles: false
  })
});

Parameters

Name	Type
options?	StepInterpolationOptions

Returns

fn

▸ (pathCoordinates, valueData): SvgPath

Parameters

Name	Type
pathCoordinates	number[]
valueData	SegmentData[]

Returns

SvgPath

Defined in

interpolation/step.ts:27