Database

Chart View

The locked (upgrade) state, or a vertical bar chart of row counts grouped by a property.

Tasks
Your workspace has already used its 1 free chart.
Upgrade to get unlimited charts.

Usage

  • Use the chart layout for a quick count of rows per group (for example tasks per status).
  • Set view.chart.locked to show the upgrade state when charts are a paid feature in your product.
  • Always pair a chart with a table view of the same data; the bars are decorative for screen readers.
  • Don’t use the chart view for detailed analytics; use BarChart or LineChart from the charts group instead.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/ChartViewExample.tsx
import { DatabaseView, createTasksSample } from '@krackedui/motion';

export function ChartViewExample() {
  return (
    <DatabaseView data={createTasksSample()} initialViewId="v-chart" />
  );
}

Examples

Bar chart

Tasks
0
1
2
3
4
4
2
2
Not startedIn progressDone

Locked state alone

Your workspace has already used its 1 free chart.
Upgrade to get unlimited charts. Learn more.

Composition

Views read the database from context, so render them inside <DatabaseView> (which picks the active view for you) or inside your own <DatabaseProvider value={useDatabase(...)}>.

anatomy
<ChartView height={320}>
  view.chart.locked → <ChartLockedState />   // icon, two lines, "Upgrade now"
  otherwise         → bars per group (option colors) + gridlines
</ChartView>

API Reference

ChartView

PropTypeDefault
height
number
320

ChartLockedState

PropTypeDefault
onUpgrade
() => void
learnMoreHref
string
className
string

Accessibility

  • The locked state’s "Upgrade now" is a button.
  • Bars are decorative; expose the same counts in a table view for screen readers.
© 2026 Motion. Internal documentation.