Appearance
Data model
Required
| Field | Type | Notes |
|---|---|---|
chartType | string | See chart types |
seriesData | 2D array | Layout depends on type |
Recommended
js
{
chartType: 'clusteredBar',
isDataTransposed: true,
seriesData: [/* … */],
title: { visible: true, text: '…' },
subtitle: { visible: false, text: '' },
legend: { visible: true },
orientation: 'vertical', // or 'horizontal'
}Always hide the placeholder subtitle unless you intend to show one:
js
subtitle: { visible: false, text: '' }chartType values
clusteredBar · stackedBar · stackedBar100 · line · area · area100 · pie · scatter · waterfall · mekko · barMekko · combo
Aliases
donut → pie · bubble → scatter
Aliases are input-only and they are not merely renames — each one seeds the defaults that make it look like the thing you asked for:
| You pass | Resolves to | Seeded defaults |
|---|---|---|
chartType: 'donut' | pie | pie.innerRadiusRatio: 0.5 (a real hole) |
chartType: 'pie' | pie | pie.innerRadiusRatio: 0 (a full pie) |
chartType: 'bubble' | scatter | a larger point diameter |
So for a donut, just ask for one — you do not need to set innerRadiusRatio yourself:
js
{ chartType: 'donut', seriesData: [['Category', 'Value'], ['North', 45]] }Pass it explicitly only to override the seeded value: { chartType: 'donut', pie: { innerRadiusRatio: 0.7 } }.
Because aliases are input-only, getChartData() returns the canonical type — a chart you created as 'donut' reports chartType: 'pie' with innerRadiusRatio: 0.5. That round-trips correctly; it is not data loss.
seriesData — bar / line / area
Rows = series (with isDataTransposed: true):
js
[
['', 'Q1', 'Q2', 'Q3'],
['Revenue', 100, 112, 125],
['Costs', 60, 66, 70],
]seriesData — pie
js
[
['Category', 'Value'],
['North', 45],
['South', 30],
]seriesData — bar Mekko
Variable-width bars: row 1 after the header sets widths (not drawn); later rows stack as heights on a real value axis. See Bar Mekko.
js
[
['', 'Enterprise', 'Mid-market', 'SMB'],
['Accounts', 120, 85, 200], // width
['Core revenue', 48, 16, 8], // height
['Add-ons', 14, 12, 10],
]seriesData — scatter
No transpose; columns are metrics:
js
[
['', 'Metric X', 'Metric Y', 'Size', 'Group'],
['Point 1', 10, 15, 8, 'A'],
]Full schema
Use getChartData() / exportConfig(), or:
js
await insight.ready;
const full = insight.getChartData();Advanced fields on full exports include canvas, axes, annotations, type-specific blocks (bar, line, pie, …), and more. See chartData schema.