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

차트

Line Chart

rx.recharts.line_chartrx.recharts.line

공식 문서

공방 주문서

서울점과 부산점의 주간 방문자 추이를 두 줄로 그려서, 흐름이 어떻게 다른지 비교하게 해 주세요.

rx.recharts.line_chart는 점을 선으로 이어 시간에 따른 변화를 보여 주는 차트입니다. 크기 자체보다 오르내림과 추세가 중요할 때 씁니다. 차트 그릇에 data를 주고, 계열마다 rx.recharts.line(data_key=…)를 넣습니다.

아래 예제들은 이 linechart_data를 씁니다. 색을 정하지 않아도 테마의 accent 색으로 그려집니다.

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.line(data_key="seoul"),
    rx.recharts.line(data_key="busan"),
    rx.recharts.x_axis(data_key="week"),
    rx.recharts.y_axis(),
    data=linechart_data,
    width="100%",
    height=250,
)

속성 바꿔 보기

선의 모양은 대부분 line에서 정합니다. 수요일 값이 None인 데이터라서, connect_nulls를 켜고 끄면 끊긴 자리가 이어지거나 비는 것을 볼 수 있습니다.

속성 바꿔 보기

curve

color

stroke_width

dash

dot

connect_nulls

hide

rx.recharts.line_chart(
    rx.recharts.line(
        data_key="sales",
        type_="monotone",
        stroke=rx.color("indigo", 9),
        stroke_width=2,
        stroke_dasharray="",
        dot=True,
        connect_nulls=False,
        hide=False,
    ),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=[
        {"day": "Mon", "sales": 12},
        {"day": "Tue", "sales": 18},
        {"day": "Wed", "sales": None},
        {"day": "Thu", "sales": 15},
        {"day": "Fri", "sales": 24},
        {"day": "Sat", "sales": 20},
    ],
    width="100%",
    height=250,
)

stroke_dasharray는 "선 길이 빈칸 길이"를 픽셀로 적은 문자열입니다. hide를 켜면 선만 감추고 축은 그대로 둡니다.

속성	값	기본값	쓰임
`line_chart(data=)`	dict의 리스트	없음	차트 전체가 쓰는 데이터
`line_chart(layout=)`	`"horizontal"` `"vertical"`	`"horizontal"`	가로 흐름 또는 세로 흐름
`line_chart(margin=, sync_id=)`	dict / 문자열	없음	둘레 여백, 다른 차트와 맞물리기
`line(data_key=)`	문자열	없음	그릴 값의 열쇠
`line(type_=)`	`"monotone"` `"linear"` `"natural"` `"step"` …	없음(직선)	점을 잇는 방식
`line(stroke=, stroke_width=)`	색 / 숫자	accent 9 / `1`	선 색과 굵기
`line(stroke_dasharray=)`	`"5 5"` 같은 문자열	없음	점선
`line(dot=, active_dot=)`	`True` / `False` / dict	accent 점	데이터 점, 마우스를 올렸을 때의 점
`line(connect_nulls=)`	`True` / `False`	`False`	빈 값을 건너 이어 그림
`line(hide=)`	`True` / `False`	`False`	선을 감춤
`line(name=, unit=, legend_type=)`	문자열		툴팁·범례 이름, 단위, 범례 아이콘
`line(x_axis_id=, y_axis_id=)`	문자열·숫자	`0`	어느 축에 붙을지
`on_click` `on_mouse_enter` …	이벤트		차트와 선 모두 받음. `line`은 `on_animation_start`·`on_animation_end`도 있음

격자·툴팁·범례 붙이기

차트 부품을 자식으로 넣으면 바로 붙습니다. cartesian_grid는 배경 격자, graphing_tooltip은 마우스를 올린 자리의 값, legend는 계열 이름표입니다. 선마다 type_="monotone"을 주면 꺾인 선이 부드러운 곡선이 됩니다.

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.line(data_key="seoul", type_="monotone", stroke=rx.color("accent", 9)),
    rx.recharts.line(data_key="busan", type_="monotone", stroke=rx.color("teal", 9)),
    rx.recharts.x_axis(data_key="week"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=linechart_data,
    width="100%",
    height=280,
)

축 제목 달기

축 안에 rx.recharts.label을 자식으로 넣으면 축 제목이 붙습니다. y축 제목은 custom_attrs={"angle": 270}으로 세웁니다. 제목이 들어갈 자리를 위해 x축의 height와 차트의 margin을 넉넉히 줍니다. 라벨의 위치 값은 차트 부품의 Label 페이지에서 자세히 봅니다.

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.line(
        data_key="seoul",
        stroke=rx.color("accent", 9),
        stroke_width=2,
        type_="natural",
    ),
    rx.recharts.x_axis(
        rx.recharts.label(value="Week", position="center"),
        data_key="week",
        height=60,
        axis_line=False,
        tick_line=False,
    ),
    rx.recharts.y_axis(
        rx.recharts.label(value="Visits", position="left", custom_attrs={"angle": 270}),
        axis_line=False,
        tick_line=False,
    ),
    rx.recharts.graphing_tooltip(),
    data=linechart_data,
    margin={"left": 20, "right": 20, "top": 20},
    width="100%",
    height=300,
)

세로로 눕히기 (layout)

layout="vertical"이면 선이 위에서 아래로 흐릅니다. x축을 숫자(type_="number"), y축을 항목(type_="category")으로 바꾸고, 네 방향 margin을 주어 글자가 잘리지 않게 합니다.

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.line(data_key="seoul", stroke=rx.color("accent", 9)),
    rx.recharts.line(data_key="busan", stroke=rx.color("teal", 9)),
    rx.recharts.x_axis(type_="number"),
    rx.recharts.y_axis(data_key="week", type_="category"),
    data=linechart_data,
    layout="vertical",
    margin={"top": 20, "right": 20, "left": 20, "bottom": 20},
    width="100%",
    height=300,
)

State로 바뀌는 데이터

data와 type_에 State 값을 연결했습니다. 버튼을 누르면 값이 조금씩 흔들리고, 두 고르기 상자로 각 선의 모양을 따로 바꿉니다. State는 브라우저 탭마다 따로 있으므로, 다른 사람의 화면에는 영향이 없습니다. 축을 둘 쓰는 y_axis_id, 차트를 맞물리는 sync_id는 영역 차트 페이지에서 다룹니다.

import random
from typing import Any


class LineChartLiveState(rx.State):
    data: list[dict[str, Any]] = [
        {"week": "W1", "seoul": 4000, "busan": 2400},
        {"week": "W2", "seoul": 3000, "busan": 1398},
        {"week": "W3", "seoul": 2000, "busan": 5800},
        {"week": "W4", "seoul": 2780, "busan": 3908},
        {"week": "W5", "seoul": 1890, "busan": 4800},
    ]
    seoul_type: str = "monotone"
    busan_type: str = "monotone"

    @rx.event
    def set_seoul_type(self, value: str):
        self.seoul_type = value

    @rx.event
    def set_busan_type(self, value: str):
        self.busan_type = value

    @rx.event
    def munge(self):
        self.data = [
            {**row, "seoul": row["seoul"] + random.randint(-500, 500), "busan": row["busan"] + random.randint(-1000, 1000)}
            for row in self.data
        ]


rx.vstack(
    rx.recharts.line_chart(
        rx.recharts.line(data_key="seoul", type_=LineChartLiveState.seoul_type, stroke=rx.color("accent", 9)),
        rx.recharts.line(data_key="busan", type_=LineChartLiveState.busan_type, stroke=rx.color("teal", 9)),
        rx.recharts.x_axis(data_key="week"),
        rx.recharts.y_axis(),
        data=LineChartLiveState.data,
        margin={"top": 20, "right": 20, "left": 20, "bottom": 20},
        width="100%",
        height=280,
    ),
    rx.hstack(
        rx.button("Munge data", on_click=LineChartLiveState.munge),
        rx.select(
            ["monotone", "linear", "step", "stepBefore", "stepAfter"],
            value=LineChartLiveState.seoul_type,
            on_change=LineChartLiveState.set_seoul_type,
        ),
        rx.select(
            ["monotone", "linear", "step", "stepBefore", "stepAfter"],
            value=LineChartLiveState.busan_type,
            on_change=LineChartLiveState.set_busan_type,
        ),
        wrap="wrap",
    ),
    width="100%",
)

주문서 완성

두 지점의 선을 색과 선 모양(실선, 점선)으로 함께 구분했습니다. 색만으로 구분하지 않으면 흑백 인쇄나 색약 사용자도 읽을 수 있습니다.

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.line(data_key="seoul", name="Seoul", type_="monotone", stroke=rx.color("accent", 9), stroke_width=2),
    rx.recharts.line(
        data_key="busan",
        name="Busan",
        type_="monotone",
        stroke=rx.color("teal", 9),
        stroke_width=2,
        stroke_dasharray="5 4",
    ),
    rx.recharts.x_axis(data_key="week"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=linechart_data,
    width="100%",
    height=300,
)

공방 노트

line_chart(data=…) 안에 계열마다 line(data_key=…)를 넣는다.
type_으로 잇는 방식(monotone·linear·step…), stroke·stroke_width·stroke_dasharray로 선 모양.
dot으로 점, connect_nulls로 빈 값 건너 잇기, hide로 감추기.
축 제목은 축 안에 rx.recharts.label, 자리는 margin과 축 height로 만든다.
data와 type_에 State 값을 주면 버튼·고르기 상자로 차트가 바뀐다.

← 이전

차트 · Bar Chart

차트 · Composed Chart

새 교시·새 강의 소식 받기

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