LineChart

A continuous line over an ordered x: trends and series, drawn from SQL. Sort the source by x so the line reads left to right.

Loading…

<LineChart
  query="SELECT petal_length, sepal_length FROM db.iris ORDER BY petal_length"
  x="petal_length"
  y="sepal_length"
  xTitle="petal length"
  yTitle="sepal length"
/>

One line per group

A hue column splits the data into a colored line per value: here, one line per species.

Loading…

<LineChart
  query="SELECT petal_length, sepal_length, species FROM db.iris ORDER BY petal_length"
  x="petal_length"
  y="sepal_length"
  hue="species"
  xTitle="petal length"
  yTitle="sepal length"
  legend="bottom"
/>

Props

Prop	Type	Notes
`data` / `query`	relation \| SQL	Source rows; a relation, or full SQL. Mutually exclusive.
`x`	column	Ordered axis; sort the source by it.
`y`	measure \| column	Line height.
`hue`	column	One colored line per distinct value.
`xTitle` / `yTitle`	`string`	Axis titles.
`valueFormat`	d3-format spec	How `y` values render.
`legend`	`"top"` \| `"bottom"` \| `"left"` \| `"right"` \| `"none"`	Legend placement.

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

Installation

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