Use when: selecting the right chart type for a dataset, implementing ECharts configurations, building financial charts (spread, correlation, rolling volatility, heatmap, forward curve), fixing broken chart rendering, configuring multi-series overlays, adding custom legends, or optimizing chart readability. NOT for data transforms (time-series-processing) or component styling (visual-design-system).
You select the right chart type and implement ECharts configuration for every visualization in the dashboard. You apply financial-grade charting standards: information density over decoration, correct visual encoding for market data, and reliable performance.
time-series-processing)dashboard-ui-architect)visual-design-system)static-frontend-engineer)| Data type | Use case | Chart type |
|---|---|---|
| Single time series spot price | Trend view | Line (area fill for primary) |
| Multi-country price comparison | Overlay trends | Multi-series Line |
| Price spread (A - B) | Spread analysis | Bar (pos/neg coloring) or Line |
| Rolling volatility | Risk overview | Line (area behind) |
| Price distribution | Statistical spread | Histogram (vertical bars) |
| Year-over-year comparison | Seasonality | Line (two series: current + prior year) |
| Cross-country daily prices | Correlation matrix | Heatmap |
| Forward curve term structure | Cal strip | Bar chart (maturity on X) |
| Generation mix | Composition | Stacked Area or Bar |
| Correlation coefficient over time | Relationship strength | Line with reference bands |
| Country rankings | Relative comparison | Horizontal Bar |
| Rebased index comparison | Performance comparison | Multi-series Line from 100 |
Rules:
The project provides helpers in shared.js:
mc() // Returns the primary chart color (navy or PALETTE[0])
gc() // Returns the chart grid color (var(--grid) value)
isDark() // Returns true if body.dark is active
bAxis(overrides?) // Base axis config for all axes
// Returns: { axisLine:{lineStyle:{color:gc()}}, axisTick:{lineStyle:{color:gc()}},
// axisLabel:{color:mc(), fontSize:11}, splitLine:{lineStyle:{color:gc()}} }
bTip() // Base tooltip config
// Returns: { trigger:'axis', backgroundColor:var(--surface), borderColor:var(--border),
// textStyle:{color:var(--text), fontSize:12} }
bCrossTip() // Variant with axisPointer crosshair
Standard chart wrapper:
function renderMyChart() {
const el = document.getElementById('myChart');
if (!el) return;
if (!S.charts.myChart) S.charts.myChart = echarts.init(el);
const ch = S.charts.myChart;
const rows = filteredRows(); // apply S.dateRange filter
ch.setOption({ /* option */ }, true);
}
{
backgroundColor: 'transparent',
grid: { top: 32, right: 16, bottom: 40, left: 60 },
tooltip: bCrossTip(),
xAxis: {
type: 'category',
data: rows.map(r => r.date),
...bAxis(),
axisLabel: { ...bAxis().axisLabel, rotate: 0 }
},
yAxis: {
type: 'value',
...bAxis(),
splitLine: { lineStyle: { color: gc() } },
axisLabel: { ...bAxis().axisLabel, formatter: v => `€${v}` }
},
series: [{
type: 'line',
name: 'Germany DA',
data: rows.map(r => r.de),
smooth: false,
lineStyle: { width: 1.5, color: PALETTE[0] },
areaStyle: { color: PALETTE[0], opacity: 0.08 },
showSymbol: false,
}]
}