Spark Bars

A tiny bar chart for showing a trend inside a card. The bars grow up from the baseline one after another, resize when the values change, and the active bar takes the accent colour. It reads out as an image with every value listed, since the bars carry no labels. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add spark-bars

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/spark-bars.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { SparkBars } from "@/components/ui/spark-bars";

export default function Example() {
  return <SparkBars values={[12, 18, 9, 22, 30, 26, 34]} label="Steps per day" />;
}

Props