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: '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 reference lines: one entry per line, each with a value, an optional title label beside it, and a style styling the line — colors, width and dash array, each in its normal, focused and defocused states. The entry's titleSide, titleTextStyle and the other title* members cover the label's placement and styling, and several entries draw several lines. The category axis supports the same thresholds property for vertical reference lines (with a linear scale).
• 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 shape's colors and its focused and defocused states are left 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.
• 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.