type property on your GraphConfig:
const config: GraphConfig = {
type: 'line',
data: {
/* ... */
},
};
All types
| Type | Description | Best for |
|---|---|---|
line | Line chart | Time series, trends |
areaStacked | Stacked area chart | Part-to-whole over time |
bar | Horizontal bar chart | Comparing categories, ranking |
barStacked | Stacked horizontal bars | Composition across categories |
barStackedFill | 100% stacked horizontal bars | Percentage breakdowns |
column | Vertical column chart | Comparisons, time series |
columnStacked | Stacked columns | Composition over time |
columnStackedFill | 100% stacked columns | Proportions over time |
combo | Dual y-axis chart | Different units/scales |
pie | Pie chart | Simple part-to-whole (2-6 slices) |
donut | Donut chart | Part-to-whole with central metric |
funnel | Funnel chart | Conversion funnels, stages |
heatmap | Heatmap | Patterns across two dimensions |
scatter | Scatter plot | Correlation, distribution |
bubble | Bubble chart | Three-variable comparisons |
waterfall | Waterfall chart | Financial analysis, variance |
mekko | Mekko chart | Market share analysis |
table | Data table | Precise values |
TypeScript
type Type =
| 'line'
| 'areaStacked'
| 'bar'
| 'barStacked'
| 'barStackedFill'
| 'column'
| 'columnStacked'
| 'columnStackedFill'
| 'combo'
| 'pie'
| 'donut'
| 'funnel'
| 'heatmap'
| 'scatter'
| 'bubble'
| 'waterfall'
| 'mekko'
| 'table';