Beautiful Charts
Get the charts

Instrument · Free · Recharts or ECharts

Line chart: pick what's on it

Every option is a prop of the installed chart. The preview and the code use the same props, so what you copy is what you see.

Options, preview and code

Engine
Presets
Shape
Surroundings
Legend
Tooltip
Colours
Behaviour
Feel
States

Adoption · weekly

Active teams against plan

74
Active teams · W38
Up, a good sign

Active teams rose 95% from W27 to W38.

1 value is missing and is shown as a gap, not zero.

Active teams, Plan across 12 categories. Active teams rose 95% from W27 to W38. 1 value is missing and is shown as a gap, not zero.
WeekActive teamsPlan
Code for this chart

"use client";

// Install: npx shadcn@latest add https://beautifulcharts.dev/r/instrument-line-chart-recharts.json
import { LineChart } from "@/components/beautiful-charts/themes/instrument/recharts/line-chart";
import type { ChartConfig } from "@/components/beautiful-charts/core/contracts";

const data = [
  { week: "W27", active: 38, plan: 44 },
  { week: "W28", active: 42, plan: 46 },
  { week: "W29", active: 40, plan: 48 },
  { week: "W30", active: 47, plan: 50 },
  { week: "W31", active: 51, plan: 52 },
  { week: "W32", active: null, plan: 54 },
  { week: "W33", active: 55, plan: 56 },
  { week: "W34", active: 61, plan: 58 },
  { week: "W35", active: 63, plan: 60 },
  { week: "W36", active: 64, plan: 62 },
  { week: "W37", active: 69, plan: 64 },
  { week: "W38", active: 74, plan: 66 },
];

const config = {
  active: { label: "Active teams" },
  plan: { label: "Plan" },
} satisfies ChartConfig;

export function MyChart() {
  return (
    <LineChart
      data={data}
      config={config}
      xKey="week"
      eyebrow="Adoption · weekly"
      title="Active teams against plan"
    />
  );
}