Gradients

Series fills and strokes can use SVG gradients: declare them in linearGradients (or radialGradients) and point a series at one with gradient. As with stacks and groups, a sole configured gradient is applied to every series automatically — gradient ids only come into play once several are declared.

Open in demo ↗

// Series reference a gradient by id. The gradient's x1/y1 → x2/y2 vector is
// in 0–1 shape coordinates (here top → bottom), and each stop sets an
// offset, color, and opacity.
import type { MochartInputConfig } from '@mochart/core';

export const config: MochartInputConfig = {
  version: '1.0.0',
  title: { text: 'Bandwidth' },
  categoryAxis: { property: 'hour', type: 'string', scale: 'ordinal' },
  linearGradients: [
    {
      id: 'fade',
      x1: 0, y1: 0, x2: 0, y2: 1,
      stops: [
        { offset: 0, color: '#1f77b4', opacity: 0.9 },
        { offset: 1, color: '#1f77b4', opacity: 0.05 }
      ]
    }
  ],
  series: [
    {
      property: 'gbps',
      title: 'Throughput',
      renderer: 'area',
      gradient: 'fade'
    }
  ]
};

export const data = [
  { hour: '00:00', gbps: 14 },
  { hour: '04:00', gbps: 9 },
  { hour: '08:00', gbps: 32 },
  { hour: '12:00', gbps: 45 },
  { hour: '16:00', gbps: 51 },
  { hour: '20:00', gbps: 38 }
];

How it works

• The gradient vector runs from x1/y1 to x2/y2 in 0–1 shape coordinates — 0,0 → 0,1 is a top-to-bottom fade. Add rotation to angle it.
• Each stop sets offset (0–1 along the vector), color, and opacity; stops is the one property without a default.
• Radial gradients take cx/cy/r (circle) and fx/fy (focal point) instead of a vector.
• Shared values for several gradients can go in linearGradientDefaults / radialGradientDefaults, like every list section (see the config model).
• Gradients are positional — the fade follows the shape, not the data. For color driven by data values, see color by value.