Line Chart · CropWatch UI

CwLineChart

Responsive SVG time-series chart with a primary series, optional secondary series, standalone alert markers, named threshold lines, a hover tooltip, and legend toggles. The route reference at the bottom of this page documents the full prop and data-point API.

Single Series + Named Thresholds + Alert Points

Hover near the alert markers or threshold lines in this sample. The tooltip now shows multiple named thresholds and alert details without forcing those values into the primary data series.

Temperature: 60 readings, minimum 15.29°C, maximum 28.7°C, latest 17.25°C. Use the left and right arrow keys to move between readings.

<CwLineChart
	data={tempData}
	alertPoints={temperatureAlertPoints}
	thresholds={temperatureThresholds}
	primaryLabel="Temperature"
	primaryUnit="°C"
	height={350}
/>

Dual Series + Right Axis

Add secondaryData only when the comparison metric needs a different unit or scale. The chart automatically adds the dashed line and right-side axis.

Temperature: 60 readings, minimum 15.29°C, maximum 28.7°C, latest 17.25°C. Humidity: 60 readings, minimum 40.01%, maximum 71.29%, latest 45.77%. Use the left and right arrow keys to move between readings.

<CwLineChart
	data={tempData}
	secondaryData={humidityData}
	threshold={28}
	primaryLabel="Temperature"
	secondaryLabel="Humidity"
	primaryUnit="°C"
	secondaryUnit="%"
	height={350}
/>

Compact Chart, No Grid

Lower the height and disable the grid for dashboard tiles or dense cards. Tooltip and legend behavior still work in the compact layout.

Soil Temp: 40 readings, minimum 13.29°C, maximum 22.37°C, latest 21.49°C. Use the left and right arrow keys to move between readings.

<CwLineChart
	data={soilTemp}
	primaryLabel="Soil Temp"
	primaryUnit="°C"
	height={200}
	showGrid={false}
/>

Keyboard navigation

Tab to any chart plot, then use ← → to step through readings, Home/End to jump to the first or last one, and Esc to hide the tooltip. Each reading is announced to screen readers.

Loading, no data & locale

Loading chart data…

Empty data (automatic no-data state)

No data available

locale="ja-JP", decimals=1

土壌水分: 40 readings, minimum 22.2%, maximum 47.7%, latest 47.1%. Use the left and right arrow keys to move between readings.

CwDeviceLineChartSection

Opinionated wrapper that composes one or more CwLineChart instances into the device-history card used by CropWatch dashboards.

Air device

<CwDeviceLineChartSection
	isSoilDevice={false}
	airTemperatureChartData={tempData}
	airHumidityChartData={humidityData}
	airTemperatureThreshold={28}
/>

Soil device (3-column)

Soil Temperature

Temperature: 40 readings, minimum 13.29°C, maximum 22.37°C, latest 21.49°C. Use the left and right arrow keys to move between readings.

Soil Moisture

Moisture: 40 readings, minimum 22.24%, maximum 47.68%, latest 47.09%. Use the left and right arrow keys to move between readings.

Electrical Conductivity

EC: 40 readings, minimum -0.26 mS/cm, maximum 2.16 mS/cm, latest 1.81 mS/cm. Use the left and right arrow keys to move between readings.

Loading chart data…

Empty

No data available

API

Usage and API reference

CwLineChart is the low-level time-series chart for sensor history. Pass a primary series, optionally add a secondary right-axis series, and the component handles responsive sizing, auto-scaled axes, a hover crosshair, standalone alert markers, named thresholds, and legend toggles.

How to think about it

Start with the primary series `data` is the only required prop. Each point needs a `timestamp` and `value`, and you can still attach legacy `alert` metadata directly to a point when that is the simplest shape.
Add `secondaryData` only for different units When the second series needs its own scale, pass `secondaryData` and the matching `secondaryLabel` / `secondaryUnit`. The chart automatically adds a right Y-axis and dashed line.
Prefer `alertPoints` for explicit markers Use `alertPoints` when alerts should be managed separately from the primary data array. The chart still supports the older `data[].alert` shorthand for one-off cases.
Use `thresholds` for named horizontal rules `thresholds` is the preferred API for multiple named lines. Hovering near a threshold shows its name and value in the tooltip. The old `threshold` prop remains as a single-line shorthand.
Adjust height to the surface Use taller charts for analysis views and shorter ones for cards. Set `showGrid={false}` when the surrounding layout already gives enough visual structure.

Props and data shape

CwLineChart has no slots or callbacks. The hover tooltip, crosshair, responsive width observer, and legend toggles are built in.

API	Type	Details
`data` Required	`CwLineChartDataPoint[]`	Primary time-series data rendered against the left Y-axis.
`data[].timestamp`	`string \| Date`	Point timestamp used for X-axis placement and tooltip formatting.
`data[].value`	`number`	Numeric reading plotted on the primary line and left Y-axis.
`data[].alert`	`CwLineChartAlert`	Legacy single-alert shorthand attached directly to one primary data point.
`data[].alerts`	`CwLineChartAlert[]`	Optional multiple alerts associated with a single primary data point.
`alertPoints` Default: `[]`	`CwLineChartAlertPoint[]`	Optional standalone alert markers. Use this when alerts are managed separately from the main data series.
`secondaryData` Default: `[]`	`CwLineChartSecondaryDataPoint[]`	Optional comparison series for the right Y-axis. Each point uses the same `timestamp` + `value` shape without alerts.
`threshold`	`number`	Legacy single-threshold shorthand for the primary axis. Ignored when `thresholds` is provided.
`thresholds` Default: `[]`	`CwLineChartThreshold[]`	Named threshold lines drawn on the primary axis. Hovering near a line shows its name and value in the tooltip.
`primaryLabel` Default: `Value`	`string`	Left-axis label and primary legend label.
`secondaryLabel` Default: `Secondary`	`string`	Right-axis label and secondary legend label.
`primaryUnit` Default: `''`	`string`	Unit suffix used in the primary tooltip and threshold label.
`secondaryUnit` Default: `''`	`string`	Unit suffix used in the secondary tooltip.
`height` Default: `300`	`number`	Chart height in pixels.
`showGrid` Default: `true`	`boolean`	Shows or hides the horizontal and vertical guide lines.
`noData`	`string \| boolean`	When present, blurs the chart and shows an overlay. Pass localized text, or use the bare `noData` attribute for "No data available".
`class` Default: `''`	`string`	Optional class forwarded to the chart wrapper element.
`loading` Default: `false`	`boolean`	Shows a skeleton chart and sets `aria-busy` while data loads.
`locale`	`string`	BCP 47 locale for number and date formatting. Defaults to the runtime locale.
`decimals`	`number`	Fixed number of fraction digits for displayed values.
`ariaLabel`	`string`	Accessible name for the chart.
`primaryColor / secondaryColor`	`string`	CSS colours for the two series. Default to the chart tokens.
`CwDeviceLineChartSection headingLevel` Default: `2`	`1–6`	Heading level of the section title.
`CwDeviceLineChartSection temperatureUnit / ecUnit`	`string`	Units shown in the legend and tooltips.

Copy-paste examples

Each snippet is a complete, working example you can paste into a Svelte 5 component.

Named thresholds and standalone alert points

This is the preferred setup when alert markers and threshold rules come from separate telemetry or rule data.

<script lang="ts">
	import { CwLineChart } from '@cropwatchdevelopment/cwui';
	import type {
		CwLineChartAlertPoint,
		CwLineChartDataPoint,
		CwLineChartThreshold
	} from '@cropwatchdevelopment/cwui';

	const temperatureData: CwLineChartDataPoint[] = [
		{ timestamp: '2026-04-04T00:00:00Z', value: 21.4 },
		{ timestamp: '2026-04-04T06:00:00Z', value: 23.1 },
		{ timestamp: '2026-04-04T12:00:00Z', value: 27.8 },
		{ timestamp: '2026-04-04T18:00:00Z', value: 25.9 }
	];

	const temperatureThresholds: CwLineChartThreshold[] = [
		{ id: 'target-high', name: 'Target high', value: 24 },
		{ id: 'warning-high', name: 'Warning high', value: 27 },
		{ id: 'critical-high', name: 'Critical high', value: 29 }
	];

	const alertPoints: CwLineChartAlertPoint[] = [
		{
			id: 'spike',
			timestamp: '2026-04-04T12:00:00Z',
			value: 27.8,
			message: 'Short spike detected during the irrigation cycle.',
			severity: 'warning'
		},
		{
			id: 'critical',
			timestamp: '2026-04-04T18:00:00Z',
			value: 25.9,
			message: 'Critical thermal alert triggered after a rapid rise.',
			severity: 'critical'
		}
	];
</script>

<CwLineChart
	data={temperatureData}
	alertPoints={alertPoints}
	thresholds={temperatureThresholds}
	primaryLabel="Temperature"
	primaryUnit="°C"
	height={320}
/>

Dual-axis comparison chart

Use a second series when the comparison metric needs its own unit and scale.

<script lang="ts">
	import { CwLineChart } from '@cropwatchdevelopment/cwui';
	import type {
		CwLineChartDataPoint,
		CwLineChartSecondaryDataPoint
	} from '@cropwatchdevelopment/cwui';

	const temperatureData: CwLineChartDataPoint[] = [
		{ timestamp: '2026-04-04T00:00:00Z', value: 21.4 },
		{ timestamp: '2026-04-04T06:00:00Z', value: 23.1 },
		{ timestamp: '2026-04-04T12:00:00Z', value: 27.8 },
		{ timestamp: '2026-04-04T18:00:00Z', value: 25.9 }
	];

	const humidityData: CwLineChartSecondaryDataPoint[] = [
		{ timestamp: '2026-04-04T00:00:00Z', value: 61 },
		{ timestamp: '2026-04-04T06:00:00Z', value: 58 },
		{ timestamp: '2026-04-04T12:00:00Z', value: 52 },
		{ timestamp: '2026-04-04T18:00:00Z', value: 56 }
	];
</script>

<CwLineChart
	data={temperatureData}
	secondaryData={humidityData}
	primaryLabel="Temperature"
	secondaryLabel="Humidity"
	primaryUnit="°C"
	secondaryUnit="%"
	height={360}
/>

Compact chart with the legacy shorthand

The older `threshold` and `data[].alert` API still works when you only need a single line and one or two inline point alerts.

<script lang="ts">
	import { CwLineChart } from '@cropwatchdevelopment/cwui';
	import type { CwLineChartDataPoint } from '@cropwatchdevelopment/cwui';

	const moistureData: CwLineChartDataPoint[] = [
		{ timestamp: '2026-04-04T00:00:00Z', value: 41 },
		{
			timestamp: '2026-04-04T06:00:00Z',
			value: 37,
			alert: { id: 'dry-1', message: 'Zone A drifted below the target band.' }
		},
		{
			timestamp: '2026-04-04T12:00:00Z',
			value: 29,
			alert: { id: 'dry-2', message: 'Critical dry-back detected.', severity: 'critical' }
		},
		{ timestamp: '2026-04-04T18:00:00Z', value: 34 }
	];
</script>

<CwLineChart
	data={moistureData}
	threshold={35}
	primaryLabel="Soil moisture"
	primaryUnit="%"
	height={220}
	showGrid={false}
/>

CwLineChart

Single Series + Named Thresholds + Alert Points

Dual Series + Right Axis

Compact Chart, No Grid

Keyboard navigation

Loading, no data & locale

CwDeviceLineChartSection

Temperature & Humidity

Soil telemetry

Temperature & Humidity

Temperature & Humidity

Usage and API reference

How to think about it

Props and data shape

Copy-paste examples

Named thresholds and standalone alert points

Dual-axis comparison chart

Compact chart with the legacy shorthand