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

차트

Area Chart

rx.recharts.area_chartrx.recharts.area

공식 문서

공방 주문서

월별 웹·앱 방문자 수를 쌓아서, 전체 흐름과 각각의 몫이 한눈에 보이는 그래프를 만들어 주세요.

rx.recharts.area_chart는 선 아래를 색으로 채운 영역 차트입니다. 시간에 따른 양의 변화와, 여러 값이 합쳐진 전체 크기를 함께 보여 줄 때 씁니다. 차트 그릇(area_chart)에 데이터를 주고, 안에 그릴 계열(area)과 축을 자식으로 넣습니다.

데이터는 dict의 리스트입니다. 각 dict가 x축의 한 칸이고, data_key는 그 dict에서 어느 값을 그릴지 고르는 열쇠입니다. 이 페이지의 예제는 모두 아래의 areachart_data를 씁니다.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(data_key="web"),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    data=areachart_data,
    width="100%",
    height=250,
)

차트의 width와 height는 숫자(픽셀)나 "100%" 같은 퍼센트 문자열만 받습니다. "20em" 같은 CSS 단위는 차트를 감싼 상자에 줍니다. 축(x_axis, y_axis), 격자, 툴팁, 범례는 차트 부품 페이지에서 자세히 다루고, 여기서는 필요한 만큼만 씁니다.

속성 바꿔 보기

두 영역을 stack_id="1"로 쌓아 두었습니다. 곡선 모양, 색, 선 굵기, 점, 쌓는 방식을 바꿔 보세요. 데이터는 위의 areachart_data입니다.

속성 바꿔 보기

curve

color

stroke_width

dot

stack_offset

rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        type_="monotone",
        stroke=rx.color("indigo", 9),
        fill=rx.color("indigo", 5),
        stroke_width=1,
        dot=False,
        stack_id="1",
    ),
    rx.recharts.area(
        data_key="app",
        type_="monotone",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 5),
        stroke_width=1,
        dot=False,
        stack_id="1",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=areachart_data,
    stack_offset="none",
    width="100%",
    height=250,
)

type_은 점과 점을 잇는 방식입니다. stack_offset을 expand로 바꾸면 각 달의 합이 100%가 되어 비율만 보입니다.

속성	값	기본값	쓰임
`area_chart(data=)`	dict의 리스트	없음	차트 전체가 쓰는 데이터
`area_chart(width=, height=)`	숫자 또는 `"100%"`	`"100%"`	차트 크기. 높이는 숫자로 주는 것이 안전
`area_chart(layout=)`	`"horizontal"` `"vertical"`	`"horizontal"`	가로 흐름 또는 세로 흐름
`area_chart(stack_offset=)`	`"none"` `"expand"` `"wiggle"` `"silhouette"`	없음	쌓은 영역의 기준선 계산 방식
`area_chart(sync_id=)`	문자열	없음	같은 값의 차트끼리 툴팁·브러시를 함께 움직임
`area_chart(margin=)`	`{"top": 5, ...}`	없음	차트 둘레 여백
`area_chart(base_value=)`	숫자, `"dataMin"` `"dataMax"` `"auto"`	`"auto"`	영역이 시작하는 바닥 값
`area(data_key=)`	문자열	없음	그릴 값의 열쇠
`area(type_=)`	`"monotone"` `"linear"` `"natural"` `"step"` …	`"monotone"`	곡선 보간 방식
`area(stroke=, fill=)`	색	accent 9 / accent 5	선 색과 채움 색
`area(stroke_width=)`	숫자	`1`	선 굵기
`area(dot=, active_dot=)`	`True` / `False` / dict	`False` / accent 점	점 표시, 마우스를 올렸을 때의 점
`area(stack_id=)`	문자열	없음	같은 값끼리 위로 쌓음
`area(name=, unit=)`	문자열	`data_key`	툴팁·범례에 보일 이름과 단위
`area(connect_nulls=)`	`True` / `False`	`False`	빈 값(`None`)을 건너 이어 그림
`area(x_axis_id=, y_axis_id=)`	문자열·숫자	`0`	어느 축에 붙을지
`on_click` `on_mouse_enter` …	이벤트		차트와 영역 모두 받음. `area`는 `on_animation_start`·`on_animation_end`도 있음

쌓은 영역 (stack_id)

stack_id가 같은 area들은 아래에서부터 차례로 쌓입니다. 맨 위의 경계선이 합계가 되므로, 전체 크기와 각 부분을 동시에 읽을 수 있습니다. stack_offset은 쌓는 기준을 정하고, 보통은 "none", 비율만 볼 때는 "expand"를 씁니다.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 6),
        stack_id="1",
    ),
    rx.recharts.area(
        data_key="app",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 6),
        stack_id="1",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.legend(),
    data=areachart_data,
    stack_offset="none",
    margin={"top": 5, "right": 5, "bottom": 5, "left": 5},
    width="100%",
    height=280,
)

그라디언트 채우기

영역을 위는 진하게, 아래는 투명하게 칠하면 선이 더 잘 보입니다. 차트 안에 rx.el.svg.defs로 SVG 그라디언트를 정의하고, fill="url(#아이디)"로 가리킵니다. 그라디언트 id는 페이지 안에서 겹치지 않게 짓습니다.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.el.svg.defs(
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="5%", stop_color=rx.color("accent", 9), stop_opacity=0.8),
            rx.el.svg.stop(offset="95%", stop_color=rx.color("accent", 9), stop_opacity=0),
            id="areachart_gradient",
            x1=0,
            x2=0,
            y1=0,
            y2=1,
        ),
    ),
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 9),
        fill="url(#areachart_gradient)",
        type_="natural",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=areachart_data,
    width="100%",
    height=280,
)

축을 여러 개 쓰기

크기가 전혀 다른 두 값을 한 차트에 그릴 때는 축을 둘 둡니다. 축에 y_axis_id로 이름을 붙이고, 각 area에 같은 y_axis_id를 주어 연결합니다. x축도 x_axis_id로 같은 방법을 씁니다. 다만 눈금이 둘이면 읽는 사람이 헷갈리기 쉬우므로, 단위가 정말 다를 때만 씁니다.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 5),
        y_axis_id="left",
    ),
    rx.recharts.area(
        data_key="app",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 5),
        y_axis_id="right",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(y_axis_id="left"),
    rx.recharts.y_axis(y_axis_id="right", orientation="right"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=areachart_data,
    width="100%",
    height=280,
)

세로로 눕히기 (layout)

layout="vertical"이면 영역이 위에서 아래로 흐릅니다. 이때 축의 역할도 바뀌어서, x축이 숫자(type_="number"), y축이 항목(type_="category")이 됩니다. 글자가 잘리지 않도록 margin을 네 방향 모두 주는 것이 좋습니다.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 8),
        fill=rx.color("accent", 3),
    ),
    rx.recharts.x_axis(type_="number"),
    rx.recharts.y_axis(data_key="month", type_="category"),
    data=areachart_data,
    layout="vertical",
    margin={"top": 20, "right": 20, "bottom": 20, "left": 20},
    width="100%",
    height=300,
)

차트 맞물리기 (sync_id)

sync_id가 같은 차트들은 툴팁 위치와 브러시 범위를 공유합니다. 위 차트에 마우스를 올리면 아래 차트에도 같은 달의 툴팁이 뜨고, 아래 브러시로 범위를 줄이면 위 차트도 따라 줄어듭니다. 막대·선·복합 차트와도 맞물릴 수 있습니다.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.vstack(
    rx.recharts.area_chart(
        rx.recharts.area(data_key="web", stroke=rx.color("accent", 9), fill=rx.color("accent", 5)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        rx.recharts.graphing_tooltip(),
        data=areachart_data,
        sync_id="areachart_sync",
        width="100%",
        height=180,
    ),
    rx.recharts.area_chart(
        rx.recharts.area(data_key="app", stroke=rx.color("teal", 9), fill=rx.color("teal", 5)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        rx.recharts.graphing_tooltip(),
        rx.recharts.brush(data_key="month", height=24),
        data=areachart_data,
        sync_id="areachart_sync",
        width="100%",
        height=210,
    ),
    width="100%",
)

State로 움직이는 차트

data에 State 값을 주면, 값이 바뀔 때마다 차트가 애니메이션과 함께 다시 그려집니다. 여기서는 버튼이나 영역을 누르면 숫자가 바뀌고, 고르기 상자로 type_도 State에서 바꿉니다. 리스트를 통째로 새로 대입하면 변경이 확실하게 전달됩니다.

import random
from typing import Any


class AreaChartLiveState(rx.State):
    data: list[dict[str, Any]] = [
        {"month": "Jan", "web": 4000, "app": 2400},
        {"month": "Feb", "web": 3000, "app": 1398},
        {"month": "Mar", "web": 2000, "app": 5800},
        {"month": "Apr", "web": 2780, "app": 3908},
        {"month": "May", "web": 1890, "app": 4800},
        {"month": "Jun", "web": 2390, "app": 3800},
    ]
    curve: str = "monotone"

    @rx.event
    def shuffle(self):
        self.data = [
            {**row, "web": random.randint(500, 6000), "app": random.randint(500, 6000)}
            for row in self.data
        ]

    @rx.event
    def set_curve(self, value: str):
        self.curve = value


rx.vstack(
    rx.hstack(
        rx.button("Shuffle", on_click=AreaChartLiveState.shuffle),
        rx.select(
            ["monotone", "linear", "natural", "step", "basis"],
            value=AreaChartLiveState.curve,
            on_change=AreaChartLiveState.set_curve,
        ),
    ),
    rx.recharts.area_chart(
        rx.recharts.area(
            data_key="web",
            type_=AreaChartLiveState.curve,
            on_click=AreaChartLiveState.shuffle,
        ),
        rx.recharts.area(
            data_key="app",
            type_=AreaChartLiveState.curve,
            stroke=rx.color("teal", 9),
            fill=rx.color("teal", 5),
            on_click=AreaChartLiveState.shuffle,
        ),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
        rx.recharts.legend(),
        data=AreaChartLiveState.data,
        width="100%",
        height=300,
    ),
    width="100%",
)

주문서 완성

두 영역을 같은 stack_id로 쌓고, 그라디언트로 아래를 옅게 칠했습니다. name으로 범례와 툴팁에 보일 이름을 붙이고, 가로 격자만 남겨 차분하게 만듭니다.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.el.svg.defs(
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="5%", stop_color=rx.color("accent", 9), stop_opacity=0.7),
            rx.el.svg.stop(offset="95%", stop_color=rx.color("accent", 9), stop_opacity=0.1),
            id="areachart_order_web",
            x1=0, x2=0, y1=0, y2=1,
        ),
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="5%", stop_color=rx.color("teal", 9), stop_opacity=0.7),
            rx.el.svg.stop(offset="95%", stop_color=rx.color("teal", 9), stop_opacity=0.1),
            id="areachart_order_app",
            x1=0, x2=0, y1=0, y2=1,
        ),
    ),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.area(
        data_key="web",
        name="Web",
        stroke=rx.color("accent", 9),
        stroke_width=2,
        fill="url(#areachart_order_web)",
        stack_id="visits",
    ),
    rx.recharts.area(
        data_key="app",
        name="App",
        stroke=rx.color("teal", 9),
        stroke_width=2,
        fill="url(#areachart_order_app)",
        stack_id="visits",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=areachart_data,
    width="100%",
    height=300,
)

공방 노트

area_chart(data=리스트) 안에 area(data_key=…)와 x_axis·y_axis를 자식으로 넣는다.
width·height는 숫자나 퍼센트 문자열만. CSS 단위는 바깥 상자에 준다.
stack_id가 같으면 쌓이고, stack_offset="expand"면 100% 비율 차트가 된다.
그라디언트는 rx.el.svg.defs에 정의하고 fill="url(#id)"로 쓴다.
sync_id로 차트끼리 툴팁을 맞물리고, data에 State 값을 주면 살아 움직인다.

← 이전

표와 데이터 그리드 · Data Editor

차트 · Bar Chart

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex