ThresholdLineChart
Line chart with optional horizontal threshold lines. Wraps `ChartContainer` and `LineChart`; pass `series` and optional `thresholds` via `data`.
Line chart with optional horizontal threshold lines. Wraps ChartContainer and LineChart; pass series and optional thresholds via data.
import { ThresholdLineChart } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
title | Optional | string | — | — |
unit | Optional | string | — | — |
height | Optional | number | — | — |
isTall | Optional | boolean | — | When true, uses a taller default height (360px). |
className | Optional | string | — | — |
emptyMessage | Optional | string | — | — |
isLegendVisible | Optional | boolean | — | — |
data | Optional | ThresholdLineChartData | — | — |
yTicksFormatter | Optional | (value: number) => string | — | — |
Usage
Line chart for time series with optional horizontal threshold lines (thresholds).
Includes ChartContainer chrome: title, legend with series toggle, and empty state.
Example
import { CHART_COLORS, ThresholdLineChart, UNITS } from '@tetherto/mdk-react-devkit/core'const powerData = { series: [ { label: 'Power Consumption', color: CHART_COLORS.orange, points: [ { timestamp: '2025-01-01T00:00:00.000Z', value: 28 }, { timestamp: '2025-01-02T00:00:00.000Z', value: 31 }, { timestamp: '2025-01-03T00:00:00.000Z', value: 29 }, ], }, ], thresholds: [{ label: 'Power Availability', value: 38, color: CHART_COLORS.green }],}export const ThresholdLineChartExample = () => ( <div className="mdk-example-row"> <ThresholdLineChart title="Power Consumption" data={powerData} unit={UNITS.ENERGY_MW} /> </div>)