Axes and Styling
Chart-level options sit next to marks.
createWorkbook()
.sheet("Sales")
.table("sales", { schema: sales, rows: [] })
.chart("performance", ({ refs }) => ({
title: "Revenue, target and margin",
marks: [
refs.table("sales").bar({ x: "month", y: "revenue", color: "#2563EB" }),
refs.table("sales").line({ x: "month", y: "target", color: "#94A3B8", dashed: true }),
refs.table("sales").line({ x: "month", y: "marginRate", color: "#F59E0B", axis: "y2" }),
],
axes: {
y: { title: "EUR", min: 0 },
y2: { title: "Margin", format: "0%" },
},
legend: "top",
}));
Axes
axes.x is the category axis (or the horizontal value axis of a scatter chart), axes.y the main value axis, and axes.y2 the secondary axis used by marks with axis: "y2".
| Option | Applies to | Effect |
|---|---|---|
title | all | Axis title |
hidden | all | Hides the axis |
gridlines | all | Major gridlines. On by default for y |
reverse | all | Reverses the order |
min, max | value axes | Fixed bounds |
step | value axes | Distance between ticks |
format | value axes | Excel number format such as "#,##0" or "0%" |
logBase | value axes | Logarithmic scale, such as 10 |
Without format, axes use the number format of the plotted cells, so a column styled with numFmt: "0%" gets a percentage axis.
Legend
The legend shows at the bottom when a chart has several series or slices, and is hidden for a single series. Set legend to "top", "bottom", "left", "right", or false.
Colors
Set color on a mark (single series) or on a { column, color } entry, as a hex string such as "#2563EB". A chart-level colors list colors the remaining series in order, and the slices of a pie.
createWorkbook()
.sheet("Regions")
.table("regions", { schema: regions, rows: [] })
.chart("share", ({ refs }) => ({
marks: [refs.table("regions").pie({ label: "region", value: "revenue" })],
colors: ["#2563EB", "#10B981", "#F59E0B", "#8B5CF6"],
}));
Without colors, Excel uses the workbook theme's palette.
Data labels
labels: true shows each point's value. Pass an object to choose what to show:
createWorkbook()
.sheet("Regions")
.table("regions", { schema: regions, rows: [] })
.chart("ranked", ({ refs }) => ({
marks: [
refs.table("regions").bar({
x: "region",
y: "revenue",
horizontal: true,
labels: { value: true, format: "#,##0" },
}),
],
}));
| Option | Effect |
|---|---|
value | The value (on by default) |
category | The category or slice label |
series | The series name |
percent | The share of the total, for pies and doughnuts |
format | Number format of the labels |