BarChart
A categorical bar chart driven straight from SQL. x is the category, y the measure. The grouping and aggregation run in the browser.
Loading…
<BarChart
data="db.iris"
x="species"
y="avg(petal_length)"
valueFormat=".1f"
/>Orientation and sort
Flip to orientation="horizontal" for long category labels, and order bars by "value-desc" so the largest leads.
Loading…
<BarChart
data="db.iris"
x="species"
y="count(*)"
orientation="horizontal"
sort="value-desc"
/>Two series with a full query
For anything the x/y model can't express, pass a full query and map its columns. A second measure via y2 draws grouped bars.
Loading…
<BarChart
query="SELECT species, avg(petal_length) AS petal, avg(sepal_length) AS sepal FROM db.iris GROUP BY species"
x="species"
y="petal"
y2="sepal"
valueFormat=".1f"
legend="bottom"
/>Props
| Prop | Type | Notes |
|---|---|---|
data / query | relation | SQL | Source rows; a relation, or full SQL. Mutually exclusive. |
x | column | Category axis. |
y / y2 | measure | column | Bar height, e.g. sum(amount); y2 adds a second series. |
hue | column | Split each category into colored sub-bars. |
stack | bool | "normalize" | Stack hue series; "normalize" to 100%. |
orientation | "vertical" | "horizontal" | Bar direction. |
sort | "asc" | "desc" | "value-*" | list | Category order: by label, by value, or a pinned array. |
valueFormat | d3-format spec | How values render on the axis and tooltip. |
legend | "top" | "bottom" | "left" | "right" | "none" | Legend placement. |
Expressions in y, query, and filters values support {{binding}} interpolation against the surrounding BindingProvider.
Installation
BarChart ships in @n6k.io/ui/components. Nothing to install. Register the namespace once in src/app/mdx-components.tsx and the tag resolves in both .mdx and page.py pages:
import * as n6k from "@n6k.io/ui/components";
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...n6k, // BarChart, and every other n6k component
...components,
} as unknown as MDXComponents;
}