MarkerLine

import { MarkerLine } from 'cx/charts';

MarkerLine draws horizontal or vertical lines to highlight important values such as minimum, maximum, thresholds, or averages. Child elements (like Text) can be placed inside to add labels.

 <div controller={PageController}>
  <Svg style="width: 100%; height: 350px">
    <Chart
      offset="20 -10 -40 40"
      axes={{
        x: { type: NumericAxis },
        y: { type: NumericAxis, vertical: true, deadZone: 20 },
      }}
    >
      <Gridlines />
      <MarkerLine y={m.extremes.min} colorIndex={6}>
        <Text anchors="0 0 0 0" offset="5 0 0 5" dominantBaseline="hanging">
          Min
        </Text>
      </MarkerLine>
      <MarkerLine y={m.extremes.max} colorIndex={3}>
        <Text anchors="0 0 0 0" offset="-5 0 0 5">
          Max
        </Text>
      </MarkerLine>
      <LineGraph data={m.points} colorIndex={0} />
    </Chart>
  </Svg>
  <Legend />
  <Button onClick="generate">Generate</Button>
</div> 
 class PageController extends Controller {
  onInit() {
    this.generate();
    this.addComputable(m.extremes, [m.points], (points) => {
      if (!points || points.length === 0) return { min: 0, max: 0 };
      let min = points[0].y;
      let max = points[0].y;
      for (let i = 1; i < points.length; i++) {
        if (points[i].y < min) min = points[i].y;
        if (points[i].y > max) max = points[i].y;
      }
      return { min, max };
    });
  }

  generate() {
    let y = 100;
    this.store.set(
      m.points,
      Array.from({ length: 101 }, (_, i) => ({
        x: i * 4,
        y: (y = y + (Math.random() - 0.5) * 30),
      })),
    );
  }
} 
 interface Point {
  x: number;
  y: number;
}

interface Extremes {
  min: number;
  max: number;
}

interface Model {
  points: Point[];
  extremes: Extremes;
}

const m = createModel<Model>(); 
 import { Svg, Text } from "cx/svg";
import {
  Chart,
  NumericAxis,
  Gridlines,
  LineGraph,
  MarkerLine,
  Legend,
} from "cx/charts";
import { createModel } from "cx/data";
import { Controller } from "cx/ui";
import { Button } from "cx/widgets"; 

Note how deadZone is used on the vertical axis to reserve space for min/max labels.

Configuration

Property	Type	Default	Description
`x`	`number`		Draw a vertical line at this x value.
`y`	`number`		Draw a horizontal line at this y value.
`colorIndex`	`number`		Color palette index.
`colorMap`	`string`		Name of the color map to use.
`colorName`	`string`		Name for color map lookup.
`name`	`string`		Name for legend.
`legend`	`string`	`"legend"`	Legend name to show in.
`active`	`boolean`	`true`	Whether the line is active (visible).
`affectsAxes`	`boolean`	`true`	Whether line position affects axis range.
`lineStyle`	`string`		CSS style string for the line.
`class`	`string`		CSS class for the line element.