Chart

Revenue

Last 6 months

5003752501250

JanFebMarAprMayJun

Contract

Overview

Machine-readable contract from Component Spec.

component: chartexport: Chartversion: 1attributes: data-refineui=chart

Anatomy

Part	data-refineui
root	chart
axis_labels	chart-axis-labels
bar	chart-bar
bar_track	chart-bar-track
bars	chart-bars
body	chart-body
content	chart-content
grid	chart-grid
hit_area	chart-hit-area
legend	chart-legend
legend_item	chart-legend-item
line	chart-line
line_area	chart-line-area
line_stroke	chart-line-stroke
plot	chart-plot
plot_frame	chart-plot-frame
point	chart-point
tooltip	chart-tooltip
y_axis	chart-y-axis

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import {
  Chart,
  ChartBody,
  ChartContent,
  ChartPlot,
  ChartGrid,
  ChartBars,
  ChartLine,
  ChartYAxisLabels,
  ChartAxisLabels,
  ChartLegend,
  ChartLegendItem
} from "@refineui/react";

const data = [45, 52, 38, 65, 42, 80, 55];
const labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

<Chart>
  <ChartBody>
    <ChartContent>
      <ChartYAxisLabels values={data} />
      <ChartPlot aria-label="Weekly sales chart">
        <ChartGrid values={data} />
        <ChartBars values={data} seriesColor="blue" />
      </ChartPlot>
      <ChartAxisLabels labels={labels} />
    </ChartContent>
  </ChartBody>
  <ChartLegend>
    <ChartLegendItem seriesColor="blue">Sales</ChartLegendItem>
  </ChartLegend>
</Chart>

<Chart>
  <ChartBody>
    <ChartContent>
      <ChartPlot>
        <ChartGrid values={data} lines={5} />
        <ChartLine values={data} seriesColor="green" showArea showPoints />
      </ChartPlot>
    </ChartContent>
  </ChartBody>
</Chart>

API Reference

Chart

Root chart container.

ChartBody

Main chart body section.

ChartContent

Chart content wrapper.

ChartPlot

SVG plot area.

Prop	Default	Type	Description
aria-label	—	string	Accessible name for the chart.

ChartGrid

Prop	Default	Type	Description
lines	5	number	Horizontal grid line count (includes baseline).
max	—	number	Y scale maximum (auto-derived from values when omitted).
values	—	number[]	Source values for scale derivation.

ChartBars

Prop	Default	Type	Description
values	—	number[]	Bar values (required).
max	—	number	Y scale maximum.
seriesColor	—	ChartSeriesColor	Series color key.
showTrack	false	boolean	Shows full-height track behind each bar.

ChartLine

Prop	Default	Type	Description
values	—	number[]	Line values (required).
max	—	number	Y scale maximum.
seriesColor	—	ChartSeriesColor	Series color key.
showArea	false	boolean	Area fill under the line.
showPoints	false	boolean	Point markers on each value.

ChartYAxisLabels

Y-axis tick labels.

Prop	Default	Type	Description
values	—	number[]	Source values for scale.
formatTick	—	(value: number) => string	Custom formatter.

ChartAxisLabels

X-axis labels.

Prop	Default	Type	Description
labels	—	string[]	Label strings (required).
align	"bar"	"bar" | "line"	Alignment style.

ChartLegend

Legend list container.

ChartLegendItem

Prop	Default	Type	Description
seriesColor	—	ChartSeriesColor	Series color key (required).