Overview

Set the 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';

See type options for chart-specific configuration.

Get Started

Graph types

Customisation

Configuration

Editor

Advanced

Reference

All types

TypeScript

​All types

​TypeScript

All types

TypeScript