TimeseriesChart
import { useDql } from "@dynatrace-sdk/react-hooks";
import { TimeseriesChart, convertToTimeseries } from "@dynatrace/strato-components/charts";
const { data } = useDql({
query: `timeseries avg(dt.host.cpu.usage), by:{dt.entity.host}, from:-2h`
});
<TimeseriesChart data={convertToTimeseries(data)} />
💡 convertToTimeseries(data) transforms DQL timeseries results into the chart format. One line.
Chart Variants
// Line chart (default)
<TimeseriesChart data={convertToTimeseries(data)} />
// Area chart
<TimeseriesChart data={convertToTimeseries(data)} variant="area" />
// Bar chart
<TimeseriesChart data={convertToTimeseries(data)} variant="bar" />
Multiple Metrics
const { data } = useDql({
query: `timeseries cpu=avg(dt.host.cpu.usage), mem=avg(dt.host.memory.usage),
by:{dt.entity.host}, from:-2h`
});
⚠️ DQL timeseries requires an aggregation: avg(), sum(), min(), max(), count().
Sizing
Charts fill their container. Wrap in a fixed-height div:
<div style={{ height: 300 }}>
<TimeseriesChart data={convertToTimeseries(data)} />
</div>
🧠 Quick Check
Which component renders time series metrics as a line chart?
What's Next
Module 7 — Build a complete HUD: KPI cards + charts + data table.