ComboChart

Two measures on one category axis, each with its own y-axis. Typically a bar on the left and a line on the right. For quantities that share an x but not a scale.

Loading…

<ComboChart
  query="SELECT species, count(*) AS n, avg(petal_length) AS petal FROM db.iris GROUP BY species"
  x="species"
  left={{ field: "n", type: "bar", title: "Flowers" }}
  right={{ field: "petal", type: "line", title: "Avg petal (cm)" }}
  legend="bottom"
/>

The two axes

left and right each take an axis descriptor: { field, type, title }. type is "bar" or "line" (default: left bar, right line), and a per-axis valueFormat formats that scale. The two axes are independent, so a small line and a large bar series stay readable together.

Props

Prop	Type	Notes
`data` / `query`	relation \| SQL	Source rows; a relation, or full SQL. Mutually exclusive.
`x`	column	Shared category axis.
`left` / `right`	`{ field, type, title, valueFormat }`	Each axis: which column, drawn as `"bar"` or `"line"`, its title and format.
`sort`	`"asc"` \| `"desc"` \| `"value-*"` \| list	Category order: by label, by the left measure, or pinned.
`legend`	`"top"` \| `"bottom"` \| `"none"`	Legend placement.

Expressions in query and filters values support {{binding}} interpolation against the surrounding BindingProvider.

Installation

ComboChart 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, // ComboChart, and every other n6k component
    ...components,
  } as unknown as MDXComponents;
}