Line Chart

Name: elia
Author: AILE.SH

Trend over time, with a snapping crosshair that reads every series at once.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { LineChart } from "@aile.sh/elia";

const DAYS = ["Aug 1", "Aug 4", "Aug 7", "Aug 10", "Aug 13", "Aug 16", "Aug 19", "Aug 22"];

export function Example() {
  return (
    <LineChart
      title="Median latency"
      caption="p50 response time, milliseconds"
      labels={DAYS}
      curve
      showTable
      height={260}
      reference={{ value: 800, label: "SLA" }}
      formatValue={(v) => `${v} ms`}
      series={[
        { id: "nano", label: "aile-nano", data: [240, 232, 251, 228, 210, 219, 204, 198] },
        { id: "core", label: "aile-core", data: [520, 546, 610, 588, 640, 605, 572, 559] },
        { id: "pro", label: "aile-pro", data: [910, 880, 845, 902, 861, 790, 774, 742] },
      ]}
    />
  );
}

— elia design system · MIT · charts · https://github.com/aile-sh/elia