Series
General charts
Category, linear, statistical, and polar charts on the same engine and lifecycle as price charts.
How general charts work
A general chart lives in a pane with a horizontal domain other than time, such as categories or numbers. You add axes to the pane, then add series that reference those axes by id. General and financial panes can share one chart: a price pane on top, a revenue column pane below, one render() and one remove().
A general-only chart
Pass initialPane to make the first pane general. No hidden financial pane or series is created.
const chart = await createChart(container, {
autoSize: true,
initialPane: { horizontal_domain: { type: "category", scale: "band" } },
});
chart.addAxis({ id: "month", pane: 0, dimension: "x", scale: "band" });
chart.addAxis({ id: "revenue", pane: 0, dimension: "y", scale: "linear" });
const revenue = chart.addSeries("column", {
pane: 0, x_axis_id: "month", y_axis_id: "revenue", title: "Revenue",
});
revenue.setData([
{ id: "jan", x: "Jan", y: 42 },
{ id: "feb", x: "Feb", y: 57 },
{ id: "mar", x: "Mar", y: 49 },
]);Mixing with a price chart
const summary = chart.addPane({
preserve_empty: true,
horizontal_domain: { type: "category", scale: "band" },
});
const pane = summary.paneIndex();
chart.addAxis({ id: "month", pane, dimension: "x", scale: "band" });
chart.addAxis({ id: "revenue", pane, dimension: "y", scale: "linear" });
chart.addSeries("column", { pane, x_axis_id: "month", y_axis_id: "revenue" })
.setData([{ id: "jan", x: "Jan", y: 42 }]);
chart.render();Series kinds and rows
| Family | Kinds | Row shape |
|---|---|---|
| Cartesian | xy_line, xy_area, column, histogram, horizontal_bar | { id?, x, y | null, color?, label? } |
| Ranges | range_area, range_bar | { x, low, high } |
| Error bars | error_bar | xy row + x_low, x_high, y_low, y_high |
| Statistical | box_plot | { x, min, q1, median, q3, max } |
| Statistical | scatter, bubble | xy row, bubble adds size |
| Statistical | heatmap_grid | { x, y, value } |
| Polar | pie, radar, polar_area, radial_bar | { x: string, y } |
x accepts strings, numbers, or Date values, depending on the axis. addSeries("histogram") creates the general histogram when you pass x_axis_id, and the financial histogram otherwise.
Stacking and grouping
Group series with group_id and stack them with stack_id. stack_mode chooses the stacking rule: normal, percent, positive, cumulative, silhouette, or wiggle.
Legends, tooltips, and brushing
General charts have a tooltip on by default (generalTooltip) and an optional legend (generalLegend, hidden by default). In React, GeneralLegend, GeneralTooltip, GeneralDataLabels, and GeneralBrushControls configure the same features declaratively. See the React page.