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

차트

Composed Chart

rx.recharts.composed_chart

공식 문서

공방 주문서

월별 주문 수는 막대로, 목표치는 점선으로 한 차트에 겹쳐서 목표를 넘긴 달이 바로 보이게 해 주세요.

rx.recharts.composed_chart는 영역(area), 막대(bar), 선(line)을 한 차트 안에 섞어 그리는 그릇입니다. 실제 값은 막대로, 목표나 평균은 선으로 보여 주는 것처럼, 차트 하나의 종류만으로는 다 말할 수 없을 때 씁니다. 자식은 적은 순서대로 그려지므로, 뒤에 적은 계열이 앞 계열 위에 겹칩니다.

예제들은 아래의 composedchart_data를 씁니다.

composedchart_data = [
    {"month": "Jan", "visits": 4000, "orders": 2400, "target": 2400},
    {"month": "Feb", "visits": 3000, "orders": 1398, "target": 2210},
    {"month": "Mar", "visits": 2000, "orders": 5800, "target": 2290},
    {"month": "Apr", "visits": 2780, "orders": 3908, "target": 2000},
    {"month": "May", "visits": 1890, "orders": 4800, "target": 2181},
    {"month": "Jun", "visits": 2390, "orders": 3800, "target": 2500},
]


rx.recharts.composed_chart(
    rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 4)),
    rx.recharts.bar(data_key="target", bar_size=20, fill=rx.color("teal", 8)),
    rx.recharts.line(data_key="orders", type_="monotone", stroke=rx.color("orange", 9)),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    data=composedchart_data,
    width="100%",
    height=280,
)

속성 바꿔 보기

복합 차트는 막대 차트의 간격 속성과 영역 차트의 base_value를 함께 가집니다. base_value는 영역이 시작하는 바닥입니다. "dataMin"이면 데이터의 가장 작은 값에서 시작해서 영역이 위로 떠오릅니다.

속성 바꿔 보기

bar_color

curve

base_value

bar_category_gap

rx.recharts.composed_chart(
    rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 4)),
    rx.recharts.bar(data_key="target", fill=rx.color("teal", 8)),
    rx.recharts.line(data_key="orders", type_="monotone", stroke=rx.color("orange", 9), stroke_width=2),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=composedchart_data,
    base_value="auto",
    bar_category_gap="10%",
    width="100%",
    height=280,
)

base_value는 area에만, bar_category_gap은 bar에만 영향을 줍니다. 한 그릇의 속성이 계열 종류별로 나뉘어 쓰입니다.

속성	값	기본값	쓰임
`data`	dict의 리스트	없음	모든 계열이 함께 쓰는 데이터
`layout`	`"horizontal"` `"vertical"`	`"horizontal"`	흐름 방향
`base_value`	숫자, `"dataMin"` `"dataMax"` `"auto"`	`"auto"`	`area`의 바닥 값
`bar_category_gap`	퍼센트·숫자	`"10%"`	항목 사이 간격(`bar`)
`bar_gap`	숫자	`4`	같은 항목 안 막대 간격(`bar`)
`bar_size`	숫자	자동	모든 막대의 굵기
`stack_offset`	`"none"` `"expand"` `"wiggle"` `"silhouette"`	없음	쌓은 계열의 기준 계산
`reverse_stack_order`	`True` / `False`	`False`	쌓는 순서 뒤집기
`sync_id`, `sync_method`	문자열 / `"index"` `"value"`	없음 / `"index"`	다른 차트와 툴팁·브러시 맞물리기
`margin`, `width`, `height`	dict / 숫자·퍼센트		둘레 여백과 크기
`on_click` `on_mouse_enter` `on_mouse_move` `on_mouse_leave`	이벤트		차트 영역의 마우스 이벤트

area, bar, line 각각의 속성은 그 차트의 페이지와 같습니다. 0.10에서 composed_chart의 bar_gap은 숫자만 받습니다(bar_chart는 퍼센트 문자열도 받습니다).

언제 복합 차트를 쓰나

실제 값(막대)과 목표·평균·추세(선)를 함께 볼 때
양(영역)과 그 안의 사건 수(막대)처럼 성격이 다른 값을 같은 x축 위에서 비교할 때

모든 계열은 같은 data, 같은 축, 같은 툴팁과 범례를 나눠 씁니다. 그래서 툴팁 하나에 막대 값과 선 값이 함께 나옵니다.

그리는 순서

자식은 적은 순서대로 아래에서 위로 쌓입니다. 위 차트는 막대를 먼저, 아래 차트는 영역을 먼저 적었습니다. 진한 영역이 뒤에 오면 막대를 가리므로, 넓게 칠하는 계열을 앞에 적는 것이 보통입니다.

composedchart_data = [
    {"month": "Jan", "visits": 4000, "orders": 2400, "target": 2400},
    {"month": "Feb", "visits": 3000, "orders": 1398, "target": 2210},
    {"month": "Mar", "visits": 2000, "orders": 5800, "target": 2290},
    {"month": "Apr", "visits": 2780, "orders": 3908, "target": 2000},
    {"month": "May", "visits": 1890, "orders": 4800, "target": 2181},
    {"month": "Jun", "visits": 2390, "orders": 3800, "target": 2500},
]


rx.flex(
    rx.recharts.composed_chart(
        rx.recharts.bar(data_key="orders", fill=rx.color("teal", 8)),
        rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 6)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        data=composedchart_data,
        width="100%",
        height=200,
    ),
    rx.recharts.composed_chart(
        rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 6)),
        rx.recharts.bar(data_key="orders", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        data=composedchart_data,
        width="100%",
        height=200,
    ),
    direction="column",
    spacing="4",
    width="100%",
)

축을 둘 쓰기

주문 수(수십)와 매출(수천)처럼 크기가 전혀 다른 값은 같은 축에서 한쪽이 바닥에 깔립니다. 두 번째 y축을 orientation="right"로 오른쪽에 두고, y_axis_id로 계열과 축을 짝짓습니다. 눈금이 둘이면 잘못 읽기 쉬우니, 범례와 축 색으로 어느 값이 어느 축인지 분명히 해 줍니다.

rx.recharts.composed_chart(
    rx.recharts.bar(
        data_key="orders",
        bar_size=20,
        fill=rx.color("accent", 8),
        y_axis_id="left",
    ),
    rx.recharts.line(
        data_key="revenue",
        type_="monotone",
        stroke=rx.color("green", 9),
        y_axis_id="right",
    ),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(y_axis_id="left"),
    rx.recharts.y_axis(y_axis_id="right", orientation="right"),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=[
        {"day": "Mon", "orders": 40, "revenue": 2400},
        {"day": "Tue", "orders": 30, "revenue": 1398},
        {"day": "Wed", "orders": 55, "revenue": 9800},
        {"day": "Thu", "orders": 27, "revenue": 3908},
        {"day": "Fri", "orders": 62, "revenue": 4800},
        {"day": "Sat", "orders": 48, "revenue": 3800},
        {"day": "Sun", "orders": 35, "revenue": 4300},
    ],
    width="100%",
    height=300,
)

주문서 완성

주문 수는 막대, 목표치는 점선 line으로 겹쳤습니다. 선을 막대 뒤에 적어 위에 그려지게 하고, dot=False로 점을 빼서 기준선처럼 보이게 합니다.

composedchart_data = [
    {"month": "Jan", "visits": 4000, "orders": 2400, "target": 2400},
    {"month": "Feb", "visits": 3000, "orders": 1398, "target": 2210},
    {"month": "Mar", "visits": 2000, "orders": 5800, "target": 2290},
    {"month": "Apr", "visits": 2780, "orders": 3908, "target": 2000},
    {"month": "May", "visits": 1890, "orders": 4800, "target": 2181},
    {"month": "Jun", "visits": 2390, "orders": 3800, "target": 2500},
]


rx.recharts.composed_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.bar(data_key="orders", name="Orders", fill=rx.color("accent", 8), radius=[4, 4, 0, 0], max_bar_size=28),
    rx.recharts.line(
        data_key="target",
        name="Target",
        type_="monotone",
        stroke=rx.color("orange", 9),
        stroke_width=2,
        stroke_dasharray="5 4",
        dot=False,
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=composedchart_data,
    width="100%",
    height=300,
)

공방 노트

composed_chart 하나에 area·bar·line을 섞어 넣는다. 데이터·축·툴팁은 함께 쓴다.
뒤에 적은 자식이 위에 그려진다. 넓게 칠하는 계열을 앞에.
base_value는 area, bar_category_gap·bar_gap·bar_size는 bar에 쓰인다.
크기가 다른 값은 y_axis_id로 두 번째 축에. 꼭 필요할 때만.
sync_id로 다른 차트와 맞물리는 방법은 Area Chart 페이지와 같다.

← 이전

차트 · Line Chart

차트 · Pie Chart

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex