Thresholds and ranges

Two ways to show reference context around your values: a threshold line drawn at a fixed value on an axis, and a range series that fills the band between two data properties.

Open in demo ↗

// A threshold line with a title on the value axis, plus a range series: the
// band spans from rangeProperty (low) to property (high), with the actual
// values drawn as a line on top.
import type { MochartInputConfig } from '@mochart/core';

export const config: MochartInputConfig = {
  version: '1.0.0',
  title: { text: 'Response Time' },
  categoryAxis: { property: 'day', type: 'string', scale: 'ordinal' },
  valueAxes: [
    {
      thresholds: [{
        value: 200,
        title: { text: 'SLA limit' },
        style: { normal: { strokeDashArray: '6 3' } }
      }]
    }
  ],
  series: [
    {
      property: 'p95',
      rangeProperty: 'p5',
      title: 'p5–p95 range',
      renderer: 'area',
      shapeStyle: { normal: { strokeOpacity: 0, fillOpacity: 0.25 } }
    },
    { property: 'median', title: 'Median', renderer: 'line' }
  ]
};

export const data = [
  { day: 'Mon', median: 120, p5: 80, p95: 170 },
  { day: 'Tue', median: 135, p5: 90, p95: 190 },
  { day: 'Wed', median: 150, p5: 95, p95: 230 },
  { day: 'Thu', median: 128, p5: 85, p95: 180 },
  { day: 'Fri', median: 160, p5: 100, p95: 250 },
  { day: 'Sat', median: 95, p5: 70, p95: 140 },
  { day: 'Sun', median: 88, p5: 65, p95: 130 }
];

How it works

• thresholds on a value axis draws one reference line per entry. Each entry has a value, an optional title beside the line (its text, and side, textStyle and the other members that place and style the label), and a style for the line — color, width and dash array in normal, focused and defocused states; front puts the line in front of or behind the series. A linear category axis takes the same thresholds for vertical reference lines (a date axis value is an ISO string or timestamp); an ordinal one has no value scale to place them on.
• The band is an ordinary area series with rangeProperty: the shape spans from the rangeProperty value (here p5) to the property value (p95) instead of starting at the axis base. Dropping shapeStyle.normal.strokeOpacity to 0 and fillOpacity low keeps it as background context; the colors and the focused/defocused states stay at their defaults. rangeProperty works with the other renderers too: bar draws floating bars, and line draws the two bounds as a pair of lines sharing the series' style and legend entry.
• For ranged series the tooltip prints the rangeProperty value, then tooltip.rangeValueSeparator, then the property value. That order comes from the config, not from the two magnitudes, so the example above reads low - high because it puts p5 in rangeProperty. When both ends format to the same text, the tooltip shows it once instead of repeating it either side of the separator.
• A category with only one of the two values collapses to a zero-extent span at the defined one, so the band stays connected; set partialRangeIsMissing to treat such categories as missing instead.
• Thresholds never extend the axis: a line whose value falls outside the current domain is simply not drawn. If the data alone wouldn't reach the threshold, set softMax at or above it so the axis covers it.