Patterns

Series fills can use the built-in lines, crosshatch, and dots SVG patterns. Declare them in patterns and point a series at one with pattern. A sole configured pattern is applied automatically to every area/bar series (or pie slice) when no gradients are configured; with several patterns, or any gradients, select the pattern by id.

Open in demo ↗

// Built-in patterns are screen-space fills. Declare each pattern once, then
// reference its id from a series; "series" resolves to that series' base color.
import type { MochartInputConfig } from '@mochart/core';

export const config: MochartInputConfig = {
  version: '1.0.0',
  title: { text: 'Quarterly orders by channel' },
  categoryAxis: { property: 'quarter', type: 'string', scale: 'ordinal' },
  patternDefaults: {
    spacing: 9,
    foregroundColor: 'series',
    backgroundColor: 'series',
    backgroundOpacity: 0.18
  },
  patterns: [
    { id: 'direct', type: 'lines', rotation: 45, lineWidth: 2 },
    { id: 'partner', type: 'crosshatch', rotation: 45, lineWidth: 1.5 },
    { id: 'marketplace', type: 'dots', radius: 2 }
  ],
  series: [
    { property: 'direct', title: 'Direct', renderer: 'bar', pattern: 'direct' },
    { property: 'partner', title: 'Partner', renderer: 'bar', pattern: 'partner' },
    { property: 'marketplace', title: 'Marketplace', renderer: 'bar', pattern: 'marketplace' }
  ]
};

export const data = [
  { quarter: 'Q1', direct: 42, partner: 31, marketplace: 18 },
  { quarter: 'Q2', direct: 48, partner: 35, marketplace: 24 },
  { quarter: 'Q3', direct: 55, partner: 39, marketplace: 29 },
  { quarter: 'Q4', direct: 61, partner: 44, marketplace: 37 }
];

How it works

• Patterns are measured in screen pixels, so their marks stay the same size across differently sized bars, areas, and pie slices. Markers stay solid — at marker size a pattern is unreadable.
• In an XY chart, a series can use a pattern only when its renderer is area or bar; pie slices can use one whatever the series renderer.
• spacing, the foreground/background colors and their opacities are common to every type. Lines and crosshatches add rotation and lineWidth; dots add radius.
• foregroundColor: "series" or backgroundColor: "series" resolves to the owning series' normal fill color. "currentColor" follows the CSS color the chart inherits. A null background is transparent (the default).
• Only the common properties can go in patternDefaults; type, id, ignore, rotation, lineWidth, and radius belong on individual entries.
• A series cannot use both pattern and gradient. Set pattern: null to opt a series out of an automatically applied sole pattern.
• With colorProperty, the pattern replaces the per-category fill while the per-category stroke color still applies. Legend and tooltip swatches reproduce the pattern.