Chart

A simple native bar chart.

ChartProps packages/core/src/advanced-controls.ts:74 ↗

Import

import { Chart } from "@tarve/core";

Usage

Chart.tsx

import { Chart } from "@tarve/core";

<Chart
  height={200}
  data={[
    { label: "Jan", value: 186 },
    { label: "Feb", value: 305 },
    { label: "Mar", value: 237, color: "#7c5cff" },
    { label: "Apr", value: 73 },
  ]}
/>

Props

Prop	Type	Default
`data` required	`readonly ChartDatum[]`	—
`barWidth`	`number`	`36`
`height`	`number`	`180`
`max`	`number`	—
`showLabels`	`boolean`	`true`
`showValues`	`boolean`	`true`

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

ChartDatum

interface ChartDatum {
  label: string;
  value: number;
  color?: string;
}