Curves

solid-charts uses D3’s curves to generate the line path for the Area and Line series. You can use any of the available curve functions or provide your custom function to customize the appearance of your line chart. The default curve is curveLinear, which creates a straight path between points. The curve functions are re-exported from D3 under solid-charts/curves.

Available curves Section titled Available curves

All the curves are documented in D3’s curves documentation.

import {
  curveBasis,
  curveBasisClosed,
  curveBasisOpen,
  curveBumpX,
  curveBumpY,
  curveCardinal,
  curveCardinalClosed,
  curveCardinalOpen,
  curveCatmullRom,
  curveCatmullRomClosed,
  curveCatmullRomOpen,
  curveLinear,
  curveLinearClosed,
  curveMonotoneX,
  curveMonotoneY,
  curveNatural,
  curveStep,
  curveStepAfter,
  curveStepBefore,
} from 'solid-charts/curves'

Examples Section titled Examples

Step Section titled Step

import { curveStep } from 'solid-charts/curves'

<Line curve={curveStep} />

Cardinal Section titled Cardinal

import { curveCardinal } from 'solid-charts/curves'

<Line curve={curveCardinal} />

v0.0.1

Developed and designed by Jasmin