​
📌 When to Use

Use the Area Chart when you want to:

  • Show trends over time
  • Emphasize volume or scale changes
  • Display multiple series stacked

Area charts are particularly effective for metrics that accumulate or change gradually over time.

​
🛠️ How to Add an Area Chart

​
📊 Example:

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(SUM(toInt64OrZero(SpanAttributes['gen_ai.usage.input_tokens'])) AS INTEGER) AS prompt_tokens, 
		CAST(SUM(toInt64OrZero(SpanAttributes['gen_ai.usage.output_tokens'])) AS INTEGER) AS completion_tokens, 
		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;

​
⚙️ Configuration Options

Customize your Area Chart with the following options:

  • X-Axis: A path to label or the group by param
  • Y-Axes: An array of value path and color combination

Use dynamic bindings like {{filter.timeLimit.start}}, {{filter.timeLimit.end}} to make your chart respond to dashboard time filters.

​
✅ Best Practices

  • Limit the number of series to keep the chart readable.
  • Apply consistent color palettes for related metrics.
  • Use filters ({{filter.timeLimit.start}}, {{filter.timeLimit.end}}) to enable dynamic dashboards