> ## Documentation Index
> Fetch the complete documentation index at: https://docs.openlit.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Line Chart Widget
> Learn how to use the Line Chart Widget in OpenLIT to plot precise time series metrics using ClickHouse queries and dynamic bindings.
The **Line Chart Widget** in OpenLIT helps you visualize changes in your metrics over time with sharp, precise lines. It’s ideal for tracking KPIs like API latency, CPU usage, conversion rate, or funnel performance.
## When to use
Use a Line Chart when you want to:
* Monitor trends over time with a high degree of accuracy
* Display sharp, distinct movements in your data
* Compare multiple metrics on the same time scale
## How to add a line chart
Example:
```sql theme={null}
WITH
parseDateTimeBestEffort('{{filter.timeLimit.start}}') AS start_time,
parseDateTimeBestEffort('{{filter.timeLimit.end}}') AS end_time,
dateDiff('day', start_time, end_time) AS days_diff,
dateDiff('year', start_time, end_time) AS years_diff,
multiIf(
years_diff >= 1, 'month',
days_diff <= 1, 'hour',
'day'
) AS date_granularity
SELECT
CAST(COUNT(*) AS INTEGER) AS total,
formatDateTime(DATE_TRUNC(date_granularity, Timestamp), '%Y/%m/%d %R') AS request_time
FROM otel_traces
WHERE
SpanAttributes['gen_ai.operation.name'] != 'vectordb'
AND StatusCode IN ('STATUS_CODE_OK', 'STATUS_CODE_UNSET', 'Ok', 'Unset')
AND Timestamp >= start_time AND Timestamp <= end_time
GROUP BY request_time
ORDER BY request_time
```
## Customization options
* \*\*Custom line colors
* **X/Y label and value paths**
Use dynamic bindings like `{{filter.timeLimit.start}}`, `{{filter.timeLimit.end}}` to make your chart respond to dashboard time filters.
## Best practices
* Use `GROUP BY` with consistent time buckets (e.g., minute, hour)
* Order your results by time to ensure correct rendering