Skip to content

Axis breaks

An axis break skips a span on a linear range axis (for outliers or empty bands). Breaks live on axes.<side>.breaks for primaryRange or secondaryRange (not on the domain axis).

js
axes: {
  left: {
    id: 'primaryRange',
    breaks: [
      {
        id: 'break-1',
        domainStart: 40,
        domainEnd: 180,
        gapPixels: 4,           // 3–12; default 4
        coverageMode: 'local',  // 'local' | 'fullWidth'
        // style: 'wave' | 'slashPair'  (optional)
      },
    ],
  },
}
FieldRole
idStable id for update/remove
domainStart / domainEndSkipped value range (start < end)
gapPixelsVisual gap height/width in px (clamped ~3–12)
coverageMode'local' – break marks near data; 'fullWidth' – band across the plot. Default: 'fullWidth' on line, 'local' on bar-like types
styleOptional break stroke variant (wave, slashPair, …)

Defaults seed breaks: [] (no breaks).


When to use

  • One outlier column dwarfs the rest
  • A long empty band between clusters of values
  • You need readable ticks on both sides of a gap

Avoid breaks when the full magnitude matters (for example one bar is 10× the others). A break can hide that.


Recipe: collapse a gap on a bar chart

js
{
  chartType: 'clusteredBar',
  isDataTransposed: true,
  seriesData: [
    ['', 'A', 'B', 'C', 'D'],
    ['Value', 12, 15, 220, 18],
  ],
  axes: {
    left: {
      breaks: [
        {
          id: 'skip-mid',
          domainStart: 40,
          domainEnd: 200,
          gapPixels: 6,
          coverageMode: 'local',
        },
      ],
      labels: { preferredTickInterval: 10 },
    },
  },
}

Authoring tips

  • Prefer building the break in the editor (drag handles), then getChartData() – geometry is easier to judge visually
  • Keep domainStart / domainEnd inside the visible scale; breaks outside the domain are ignored or clamped
  • Pair with a sensible preferredTickInterval so labels still land cleanly on both sides of the gap
  • Secondary axis breaks use the same shape on the secondary side (right or top)

Pitfalls

  • Break that overlaps real data you still need to compare linearly
  • gapPixels outside 3–12 (clamped)
  • Expecting breaks on band/category domains – range axes only

Next: Value axis · Secondary

Developer documentation for ChartBuddy Embed · Not the end-user Help Center · Help Center