Bar caps

cap.type draws a decorative cap on the value end of every bar in a series — the quickest way to the popular rounded-bar look, with two more shapes beside it.

Open in demo ↗

// cap.type draws a decorative cap on the value end of every bar in a series:
// 'round' rounds the corners, 'curve' bulges a dome, 'point' rises to a peak.
// The shared cap.size sits in seriesDefaults; each series picks its shape.
import type { MochartInputConfig } from '@mochart/core';

export const config: MochartInputConfig = {
  version: '1.0.0',
  title: { text: 'Cap Shapes' },
  categoryAxis: { property: 'quarter', type: 'string', scale: 'ordinal' },
  valueAxes: [{ id: 'VA0', min: 0 }],
  seriesDefaults: { renderer: 'bar', cap: { size: 10 } },
  series: [
    { property: 'round', title: 'round', cap: { type: 'round' } },
    { property: 'curve', title: 'curve', cap: { type: 'curve' } },
    { property: 'point', title: 'point', cap: { type: 'point' } }
  ],
  seriesGroups: [{ id: 'caps' }]
};

export const data = [
  { quarter: 'Q1', round: 38, curve: 31, point: 26 },
  { quarter: 'Q2', round: 44, curve: 36, point: 33 },
  { quarter: 'Q3', round: 41, curve: 42, point: 30 },
  { quarter: 'Q4', round: 49, curve: 39, point: 37 }
];

How it works

• cap.type picks the shape: round rounds the bar's end corners, curve bulges a quadratic dome, point rises to a triangular peak; null (the default) leaves the end flat. cap.size sets the cap's extent in pixels.
• The cap is part of the bar's shape, drawn at the value end and pointing the bar's way — negative bars cap downward, and on an inverted chart the caps sit on the bars' side ends. Fills, gradients and per-row colors apply to the cap like the rest of the bar.
• A bar can be shorter than its cap. cap.expand chooses how the cap fits. With true (the default) the cap keeps the full bar width and is flattened to the bar's height. With false the cap keeps its shape and is scaled down instead, so a short bar becomes a small centered dome or peak. The Capped demo in the gallery draws every shape both ways over an axis pinned well past the data, so the two are easy to compare.

Capping a stack

On stacked bars, capping every segment looks broken — usually only the stack's outer end should be capped. Declare the cap on the stack instead of the series:

Open in demo ↗

// On a stack, capping every segment looks broken — the stack's outerCap.type
// caps only its outer end instead. No per-series cap config needed: any
// series without its own cap.type wears the stack cap when it is the outer
// segment, so the cap follows legend filtering.
import type { MochartInputConfig } from '@mochart/core';

export const config: MochartInputConfig = {
  version: '1.0.0',
  title: { text: 'Revenue by Product' },
  categoryAxis: { property: 'quarter', type: 'string', scale: 'ordinal' },
  seriesDefaults: { renderer: 'bar' },
  series: [
    { property: 'starter', title: 'Starter' },
    { property: 'pro', title: 'Pro' },
    { property: 'enterprise', title: 'Enterprise' }
  ],
  seriesStacks: [{ id: 'revenue', outerCap: { type: 'round', size: 8 } }]
};

export const data = [
  { quarter: 'Q1', starter: 10, pro: 14, enterprise: 8 },
  { quarter: 'Q2', starter: 12, pro: 18, enterprise: 11 },
  { quarter: 'Q3', starter: 11, pro: 22, enterprise: 16 },
  { quarter: 'Q4', starter: 13, pro: 25, enterprise: 22 }
];

• outerCap.type (with outerCap.size and outerCap.expand) caps whichever series is the stack's outer segment at each category — no per-series cap config needed. Filter the top series in the legend and the cap moves to the segment that becomes outermost.
• A stack mixing positive and negative values gets an outer cap on each end: the topmost positive segment and the bottommost negative one.
• A series that sets its own cap.type keeps it even in a stack; add cap.onlyStackOuter to draw that cap only where the series is the outer segment — for a cap that should differ from the stack-level one.

Grouped bars need no special handling — each series caps its own bars, as in the first example.