Dataset example
Apache ECharts supports a dataset component to manage data separately from chart configuration. This allows data to be reused across multiple series and simplifies series definitions.
Instead of providing data directly in each series, you define a single dataset source and let the series reference it:
dataset: {
source: [
['Product', 'Q1', 'Q2', 'Q3', 'Q4'],
['Apples', 320, 332, 301, 334],
...
],
},
series: [{ type: 'bar' }, { type: 'bar' }, ...]
Quarterly Sales Report
Sales vs Costs Comparison
Dataset line chart example
The dataset component works equally well with line charts. The series definitions stay minimal — only the chart type changes.
Use getLineChartConfiguration() and declare series with type: 'line'. A formatter adds the °C unit on both the Y axis and the tooltip:
chartConfiguration: ODSCharts.ODSChartsConfiguration.getLineChartConfiguration(),
...
yAxis: {
axisLabel: { formatter: '{value} °C' },
},
tooltip: {
trigger: 'axis',
valueFormatter: (value) => value + ' °C',
},
series: [{ type: 'line' }, { type: 'line' }, ...]
Monthly Temperature Report
Average Temperature by City
Dataset bar and line chart example
You can also combine bar and line series from the same dataset source. This is useful to compare measured values (bars) with a trend or target line.
Use getLineAndBarChartConfiguration() and mix series types:
chartConfiguration: ODSCharts.ODSChartsConfiguration.getLineAndBarChartConfiguration(),
...
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'line' }]