Curves

curve selects the d3-shape curve that interpolates a series between its points. It affects the line and area renderers only; the default is linear — straight segments.

Open in demo ↗

// Both series read the same property: 'Raw' draws it with the default
// linear curve (dashed, markers at the data points), 'monotoneX' smooths it.
// monotoneX passes through every point and never overshoots the data.
import type { MochartInputConfig } from '@mochart/core';

export const config: MochartInputConfig = {
  version: '1.0.0',
  title: { text: 'Sensor Readings' },
  categoryAxis: { title: { text: 'Hour' }, property: 'hour', type: 'number', scale: 'linear' },
  valueAxes: [{ id: 'VA0', title: { text: 'Temperature (°C)' } }],
  seriesDefaults: { renderer: 'line' },
  series: [
    {
      property: 'reading',
      title: 'Raw (linear)',
      shapeStyle: { normal: { strokeDashArray: '4 3' } }
    },
    {
      property: 'reading',
      title: 'Smoothed (monotoneX)',
      curve: { type: 'monotoneX' },
      marker: { shape: null }
    }
  ]
};

export const data = [
  { hour: 0, reading: 52 },
  { hour: 2, reading: 47 },
  { hour: 4, reading: 61 },
  { hour: 6, reading: 55 },
  { hour: 8, reading: 70 },
  { hour: 10, reading: 64 },
  { hour: 12, reading: 76 },
  { hour: 14, reading: 58 },
  { hour: 16, reading: 66 },
  { hour: 18, reading: 49 },
  { hour: 20, reading: 57 },
  { hour: 22, reading: 51 }
];

How it works

• curve.type picks from linear, monotoneX, monotoneY, basis, cardinal, catmullRom, natural, step, stepBefore and stepAfter.
• monotoneX is the safe smoothing choice: it passes through every point and never overshoots the data. natural, cardinal and catmullRom are rounder but can swing past the extremes (or below the axis); basis smooths hardest and stops passing through the points entirely.
• curve.param feeds the two curve types that take a configurator — cardinal's tension and catmullRom's alpha, e.g. { type: 'cardinal', param: 0.8 }. The other types ignore it, and leaving it unset uses the curve's own default.
• Markers stay at the true data values whatever the curve draws — keep the default circles on a raw series to show the measurements against a smoothed line, or turn them off with marker.shape: null as the smoothed series above does. Tooltips and the crosshair read the data too, never the interpolated path.

Step charts

The three step variants hold values between points instead of connecting them — the right reading for state that persists until the next observation.

Open in demo ↗

// stepAfter holds each value until the next reading — the right semantics
// for state that persists between observations, like stock on hand. The
// default circle markers mark the actual readings at the step corners.
import type { MochartInputConfig } from '@mochart/core';

export const config: MochartInputConfig = {
  version: '1.0.0',
  title: { text: 'Inventory on Hand' },
  categoryAxis: { title: { text: 'Week' }, property: 'week', type: 'number', scale: 'linear' },
  valueAxes: [{ id: 'VA0', title: { text: 'Units' }, min: 0 }],
  series: [
    {
      property: 'onHand',
      title: 'Units in stock',
      renderer: 'area',
      curve: { type: 'stepAfter' }
    }
  ]
};

export const data = [
  { week: 1, onHand: 120 },
  { week: 2, onHand: 95 },
  { week: 3, onHand: 210 },
  { week: 4, onHand: 168 },
  { week: 5, onHand: 132 },
  { week: 6, onHand: 96 },
  { week: 7, onHand: 240 },
  { week: 8, onHand: 205 },
  { week: 9, onHand: 175 },
  { week: 10, onHand: 140 }
];

• stepAfter holds each value until the next point, stepBefore jumps at the previous one, and step switches midway between the two.
• Pair a step curve with the area renderer for quantities like inventory, capacity or headcount; on a date axis the flats span the real time between readings.