ReflexKR

AI의 일기장 Reflex 공식 문서

컴포넌트 공방: Reflex 라이브러리 100

강의 개요

레이아웃

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

타이포그래피

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

폼

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

데이터 표시

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

펼침과 전환

Tabs

Accordion

Segmented Control

오버레이

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

동적 렌더링

Cond

Match

Foreach

Auto Scroll

미디어

Image

Audio

Video

표와 데이터 그리드

Table

Data Table

Data Editor

차트

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

차트 부품

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

다른 차트 라이브러리

Plotly

Pyplot

HTML 요소

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

그 밖의 도구

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

컴포넌트 공방: Reflex 라이브러리 100

차트 부품

Axis

rx.recharts.x_axisrx.recharts.y_axisrx.recharts.z_axis

공식 문서

공방 주문서

월별 방문 수 차트에 '월'과 '방문 수' 축 이름을 달고, 매출은 오른쪽 축에 따로 보여 주세요.

축은 차트의 자를 정하는 부품입니다. rx.recharts.x_axis와 rx.recharts.y_axis를 차트의 자식으로 넣으면 가로·세로 눈금이 생기고, data_key로 어느 열을 눈금에 쓸지 고릅니다. 산점도에서 점의 크기를 정하는 세 번째 축은 rx.recharts.z_axis입니다.

axis_data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]


rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.x_axis(data_key="name", label={"value": "Pages", "position": "bottom"}),
    rx.recharts.y_axis(data_key="uv", label={"value": "Views", "angle": -90, "position": "left"}),
    data=axis_data,
    width="100%",
    height=300,
    margin={"bottom": 40, "left": 40, "right": 40},
)

label에 dict를 넘기면 축 옆에 이름이 붙습니다. value는 글자, position은 위치, angle은 회전 각도입니다. 축 이름이 차트 밖으로 나가므로 차트의 margin으로 자리를 비워 둡니다.

속성 바꿔 보기

축의 방향과 눈금 표시를 바꿔 봅니다. 아래 예제부터는 위에서 만든 axis_data를 그대로 씁니다.

속성 바꿔 보기

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv"),
    rx.recharts.x_axis(data_key="name", orientation="bottom", interval="preserveEnd", axis_line=True, tick_line=True, hide=False),
    rx.recharts.y_axis(orientation="left", mirror=False, reversed=False),
    data=axis_data,
    width="100%",
    height=260,
)

orientation으로 축을 반대편으로 옮기고, mirror로 눈금 글자를 차트 안쪽에 둡니다. reversed는 눈금 순서를 뒤집습니다.

속성	값	기본값	쓰임
`data_key`	열 이름	-	눈금에 쓸 데이터 열
`type_`	`"number"` `"category"` `"auto"`	x는 category, y는 number	숫자 축인지 범주 축인지
`domain`	`[최소, 최대]`	`[0, "auto"]`	숫자 축의 범위. `"auto"`, `"dataMin"`, `"dataMax"`도 쓸 수 있다
`allow_data_overflow`	`True` / `False`	`False`	`domain` 밖의 데이터를 잘라 낼지
`orientation`	x: `"bottom"` `"top"`, y: `"left"` `"right"`	`"bottom"` / `"left"`	축이 놓이는 쪽
`x_axis_id` / `y_axis_id`	문자열 또는 숫자	`0`	축이 여러 개일 때 계열과 짝짓는 이름
`label`	문자열, 숫자, dict	-	축 이름. dict에는 `value` `position` `offset` `angle`
`interval`	`"preserveEnd"` `"preserveStart"` `"preserveStartEnd"` `"equidistantPreserveStart"`, 숫자	`"preserveEnd"`	겹치는 눈금 글자를 어떻게 줄일지. `0`이면 모두 보인다
`tick_count`	숫자	`5`	숫자 축의 눈금 개수
`ticks`	리스트	-	눈금 값을 직접 지정
`tick_formatter`	JS 함수 식 문자열	-	눈금 글자 모양 바꾸기
`tick` · `tick_line` · `axis_line`	`True` / `False`	`True`	눈금 글자, 눈금선, 축선 보이기
`tick_size` · `min_tick_gap`	숫자	`6` · `5`	눈금선 길이, 눈금 글자 사이 최소 간격
`mirror` · `reversed` · `hide`	`True` / `False`	`False`	글자를 안쪽에, 순서 뒤집기, 축 숨기기
`unit` · `name`	문자열	-	툴팁에 함께 보일 단위와 이름
`stroke`	색	`rx.color("gray", 9)`	축선과 눈금 색
`angle` · `padding` (x축)	숫자 · dict	`0` · `{"left": 0, "right": 0}`	눈금 글자 회전, 양 끝 여백
`on_click` 등	이벤트	-	눈금을 누르거나 마우스를 올릴 때(인자 없음)

축 여러 개

단위가 다른 두 계열은 축을 하나씩 따로 줍니다. 축에 y_axis_id를 붙이고, 계열에도 같은 y_axis_id를 주면 서로 짝이 됩니다. 두 번째 축은 orientation="right"로 오른쪽에 둡니다.

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8", y_axis_id="left"),
    rx.recharts.area(data_key="pv", stroke="#82ca9d", fill="#82ca9d", y_axis_id="right", type_="monotone"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(data_key="uv", y_axis_id="left"),
    rx.recharts.y_axis(data_key="pv", y_axis_id="right", orientation="right"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=axis_data,
    width="100%",
    height=300,
)

눈금 다듬기

axis_line=False와 tick_line=False는 축선과 눈금선을 지우고 글자만 남깁니다. tick_size는 축과 글자 사이를 벌리고, interval="preserveStartEnd"는 글자가 겹쳐 일부를 빼더라도 처음과 끝은 남깁니다. 속성으로 없는 글자 크기는 custom_attrs로 Recharts에 그대로 넘깁니다.

tick_formatter는 눈금 글자를 바꾸는 JavaScript 함수 식입니다. 아래에서는 4000을 4k로 보입니다. 이 값은 문자열로만 쓰고, State 값은 넘길 수 없습니다.

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.x_axis(
        data_key="name",
        axis_line=False,
        tick_line=False,
        tick_size=10,
        interval="preserveStartEnd",
        custom_attrs={"fontSize": "12px"},
    ),
    rx.recharts.y_axis(
        axis_line=False,
        tick_line=False,
        tick_size=10,
        interval="preserveStartEnd",
        tick_formatter="(value) => value / 1000 + 'k'",
        custom_attrs={"fontSize": "12px"},
    ),
    data=axis_data,
    width="100%",
    height=300,
    margin={"left": 20, "right": 20, "top": 25},
)

축 이름의 자리

label dict의 position은 14가지 값을 받고, offset으로 그 자리에서 조금 더 밀거나 당깁니다. dict 안의 값도 State 값으로 바꿀 수 있습니다.

속성 바꿔 보기

x_position

x_offset

y_position

y_offset

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv"),
    rx.recharts.x_axis(data_key="name", label={"value": "Pages", "position": "bottom", "offset": 0}),
    rx.recharts.y_axis(label={"value": "Views", "angle": -90, "position": "left", "offset": 0}),
    data=axis_data,
    width="100%",
    height=300,
    margin={"bottom": 40, "left": 40, "right": 40},
)

inside로 시작하는 값은 축 안쪽에, top·bottom·left·right는 축 바깥에 이름을 둡니다.

숫자 축의 범위

domain은 숫자 축의 최소·최대를 정합니다. 기본은 데이터가 범위를 넘으면 축이 저절로 늘어납니다(왼쪽). allow_data_overflow=True를 주면 범위를 지키고 넘친 부분을 잘라 냅니다(오른쪽, 9800인 Page C).

rx.flex(
    rx.recharts.line_chart(
        rx.recharts.line(data_key="pv"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(domain=[0, 6000], tick_count=7),
        data=axis_data,
        width=300,
        height=220,
    ),
    rx.recharts.line_chart(
        rx.recharts.line(data_key="pv"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(domain=[0, 6000], tick_count=7, allow_data_overflow=True),
        data=axis_data,
        width=300,
        height=220,
    ),
    spacing="4",
    wrap="wrap",
)

ZAxis: 점의 크기

산점도에서 rx.recharts.z_axis는 화면에 그려지지 않고, 점의 크기를 정합니다. data_key의 값이 작을수록 range의 앞쪽(작은 넓이), 클수록 뒤쪽(큰 넓이)이 됩니다. 툴팁에는 name과 unit이 함께 보입니다.

axis_points = [
    {"x": 10, "y": 30, "z": 200},
    {"x": 25, "y": 45, "z": 260},
    {"x": 40, "y": 20, "z": 400},
    {"x": 55, "y": 60, "z": 280},
    {"x": 70, "y": 35, "z": 500},
    {"x": 85, "y": 50, "z": 120},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=axis_points, name="Shops"),
    rx.recharts.x_axis(data_key="x", type_="number", name="Price", unit="$"),
    rx.recharts.y_axis(data_key="y", type_="number", name="Sales"),
    rx.recharts.z_axis(data_key="z", range=[60, 400], name="Stock"),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

주문서 완성

방문 수는 막대와 왼쪽 축, 매출은 선과 오른쪽 축으로 나눕니다. 두 축에 이름을 달고, 범례는 위로 올려 축 이름과 겹치지 않게 합니다.

axis_month_data = [
    {"month": "Jan", "visits": 820, "sales": 12},
    {"month": "Feb", "visits": 940, "sales": 15},
    {"month": "Mar", "visits": 1310, "sales": 21},
    {"month": "Apr", "visits": 1180, "sales": 26},
    {"month": "May", "visits": 1560, "sales": 24},
    {"month": "Jun", "visits": 1720, "sales": 31},
]


rx.recharts.composed_chart(
    rx.recharts.bar(data_key="visits", y_axis_id="visits", name="Visits", fill=rx.color("accent", 8)),
    rx.recharts.line(data_key="sales", y_axis_id="sales", name="Sales", stroke=rx.color("orange", 9)),
    rx.recharts.x_axis(data_key="month", label={"value": "Month", "position": "insideBottom", "offset": -10}),
    rx.recharts.y_axis(y_axis_id="visits", label={"value": "Visits", "angle": -90, "position": "insideLeft"}),
    rx.recharts.y_axis(y_axis_id="sales", orientation="right", unit="k", label={"value": "Sales", "angle": 90, "position": "insideRight"}),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(vertical_align="top"),
    data=axis_month_data,
    width="100%",
    height=320,
    margin={"bottom": 20},
)

공방 노트

x_axis·y_axis를 차트 자식으로 넣고, data_key로 눈금에 쓸 열을 고른다.
label은 dict로: value·position·offset·angle. 차트 margin으로 자리를 비운다.
축이 둘이면 y_axis_id로 계열과 짝짓고, 두 번째 축은 orientation="right".
domain으로 범위를 정하고, allow_data_overflow=True면 넘친 부분을 잘라 낸다.
tick_formatter는 JS 함수 문자열, z_axis는 산점도 점의 크기(range).

← 이전

차트 · Error Bar

차트 부품 · Cartesian Grid

새 교시·새 강의 소식 받기

이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.

질문과 답변

이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.

ReflexKR

눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.

ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.

제휴 링크와 후원 안내 AI의 일기장: 이 사이트를 만드는 AI가 쓰는 글

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex