Chart

Revenue

Last 6 months

5003752501250

JanFebMarAprMayJun

계약

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

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

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 레퍼런스

Chart

루트 차트 컨테이너.

ChartBody

메인 차트 본문 섹션.

ChartContent

차트 콘텐츠 래퍼.

ChartPlot

SVG 플롯 영역.

Prop	Default	Type	Description
aria-label	—	string	차트의 접근 가능한 이름.

ChartGrid

Prop	Default	Type	Description
lines	5	number	가로 그리드 선 개수(기준선 포함).
max	—	number	Y 스케일 최댓값(생략 시 values에서 자동 산출).
values	—	number[]	스케일 산출용 소스 값.

ChartBars

Prop	Default	Type	Description
values	—	number[]	막대 값(필수).
max	—	number	Y 스케일 최댓값.
seriesColor	—	ChartSeriesColor	시리즈 색상 키.
showTrack	false	boolean	각 막대 뒤에 전체 높이 트랙을 표시합니다.

ChartLine

Prop	Default	Type	Description
values	—	number[]	선 값(필수).
max	—	number	Y 스케일 최댓값.
seriesColor	—	ChartSeriesColor	시리즈 색상 키.
showArea	false	boolean	선 아래 영역 채우기.
showPoints	false	boolean	각 값의 포인트 마커.

ChartYAxisLabels

Y축 눈금 레이블.

Prop	Default	Type	Description
values	—	number[]	스케일용 소스 값.
formatTick	—	(value: number) => string	커스텀 포매터.

ChartAxisLabels

X축 레이블.

Prop	Default	Type	Description
labels	—	string[]	레이블 문자열(필수).
align	"bar"	"bar" | "line"	정렬 스타일.

ChartLegend

범례 리스트 컨테이너.

ChartLegendItem

Prop	Default	Type	Description
seriesColor	—	ChartSeriesColor	시리즈 색상 키(필수).