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.

!!15202530Temperature06:31 AM11:15 AM03:58 PM08:41 PM01:24 AM06:07 AM
Single-series example Copy code 
<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.

28.00°C15202530Temperature40455055606570Humidity06:31 AM11:15 AM03:58 PM08:41 PM01:24 AM06:07 AM
Dual-series example Copy code 
<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.

1520Soil Temp06:31 AM11:12 AM03:53 PM08:34 PM01:15 AM05:55 AM
Compact chart example Copy code 
<CwLineChart
	data={soilTemp}
	primaryLabel="Soil Temp"
	primaryUnit="°C"
	height={200}
	showGrid={false}
/>

CwDeviceLineChartSection

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

Air Device

Line chart

Temperature & Humidity

28.00°C15202530Temperature40455055606570Humidity06:31 AM11:15 AM03:58 PM08:41 PM01:24 AM06:07 AM
CwDeviceLineChartSection example Copy code 
<CwDeviceLineChartSection
	isSoilDevice={false}
	hairTemperatureChartData={tempData}
	hairHumidityChartData={humidityData}
	hairTemperatureThreshold={28}
/>

Soil Device (3-column)

Line chart

Soil telemetry

Soil Temperature

25.00°C152025Temperature06:31 AM11:12 AM03:53 PM08:34 PM01:15 AM05:55 AM

Soil Moisture

40.00%2530354045Moisture06:31 AM11:12 AM03:53 PM08:34 PM01:15 AM05:55 AM

Electrical Conductivity

1.50 mS/cm00.511.522.5EC06:31 AM11:12 AM03:53 PM08:34 PM01:15 AM05:55 AM

Loading State

Line chart

Temperature & Humidity

Loading chart data…

Empty State

Line chart

Temperature & Humidity

No data available for chart
Documentation Upgrade

Start here

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

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.

APITypeDetails
data Required
CwLineChartDataPoint[]Primary time-series data rendered against the left Y-axis.
data[].timestamp
string | DatePoint timestamp used for X-axis placement and tooltip formatting.
data[].value
numberNumeric reading plotted on the primary line and left Y-axis.
data[].alert
CwLineChartAlertLegacy 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
numberLegacy 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

stringLeft-axis label and primary legend label.
secondaryLabel

Default: Secondary

stringRight-axis label and secondary legend label.
primaryUnit

Default: ''

stringUnit suffix used in the primary tooltip and threshold label.
secondaryUnit

Default: ''

stringUnit suffix used in the secondary tooltip.
height

Default: 300

numberChart height in pixels.
showGrid

Default: true

booleanShows or hides the horizontal and vertical guide lines.
class

Default: ''

stringOptional class forwarded to the chart wrapper element.

Copy-paste examples

These snippets intentionally show the full public API surface the live demo relies on.

Named thresholds and standalone alert points

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

Named thresholds and standalone alert points Copy code 
<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.

Dual-axis comparison chart Copy code 
<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.

Compact chart with the legacy shorthand Copy code 
<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}
/>