ReflexKR

컴포넌트 공방: 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

차트

Bar Chart

rx.recharts.bar_chartrx.recharts.barrx.recharts.cell

공식 문서

공방 주문서

지점별 커피와 차 판매량을 나란히 세워서, 어느 지점이 무엇을 많이 파는지 비교하게 해 주세요.

rx.recharts.bar_chart는 항목마다 막대를 세워 크기를 비교하는 차트입니다. 지점별 매출, 범주별 개수처럼 서로 떨어진 항목을 비교할 때 가장 먼저 고르는 차트입니다. 차트 그릇에 data를 주고, 그릴 계열마다 rx.recharts.bar(data_key=…)를 하나씩 넣습니다.

이 페이지의 예제는 대부분 아래의 barchart_data를 씁니다.

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_chart(
    rx.recharts.bar(data_key="coffee", fill=rx.color("accent", 8)),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    data=barchart_data,
    width="100%",
    height=250,
)

속성 바꿔 보기

bar를 둘 넣으면 한 항목 안에 막대가 나란히 섭니다. 항목 사이 간격(bar_category_gap), 같은 항목 안의 막대 사이 간격(bar_gap), 막대 뒤의 회색 배경(background)을 바꿔 보세요.

속성 바꿔 보기

color

bar_category_gap

bar_gap

background

rx.recharts.bar_chart(
    rx.recharts.bar(
        data_key="coffee",
        fill=rx.color("indigo", 8),
        background=False,
    ),
    rx.recharts.bar(
        data_key="tea",
        fill=rx.color("teal", 8),
        background=False,
    ),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    data=barchart_data,
    bar_category_gap="10%",
    bar_gap="5%",
    width="100%",
    height=250,
)

간격은 퍼센트 문자열이나 픽셀 숫자로 줍니다. background를 켜면 막대가 들어갈 자리 전체가 옅게 칠해집니다.

속성	값	기본값	쓰임
`bar_chart(data=)`	dict의 리스트	없음	차트 전체가 쓰는 데이터
`bar_chart(layout=)`	`"horizontal"` `"vertical"`	`"horizontal"`	세로 막대 또는 가로 막대
`bar_chart(bar_category_gap=)`	퍼센트·숫자	`"10%"`	항목과 항목 사이 간격
`bar_chart(bar_gap=)`	퍼센트·숫자	`4`	같은 항목 안 막대 사이 간격
`bar_chart(bar_size=, max_bar_size=)`	숫자	자동	모든 막대의 굵기, 굵기의 최댓값
`bar_chart(stack_offset=)`	`"none"` `"expand"` `"wiggle"` `"silhouette"`	`"none"`	쌓은 막대의 기준 계산 방식
`bar_chart(reverse_stack_order=)`	`True` / `False`	`False`	쌓는 순서를 뒤집음
`bar_chart(sync_id=, margin=)`	문자열 / dict	없음	다른 차트와 맞물리기, 둘레 여백
`bar(data_key=)`	문자열	없음	그릴 값의 열쇠. 값이 `[낮음, 높음]`이면 범위 막대
`bar(fill=, stroke=)`	색	accent 9 / 없음	막대 색과 테두리 색
`bar(stack_id=)`	문자열	없음	같은 값끼리 위로 쌓음
`bar(radius=)`	숫자 또는 `[좌상, 우상, 우하, 좌하]`	`0`	모서리 둥글기
`bar(background=)`	`True` / `False`	`False`	막대 자리 배경
`bar(min_point_size=)`	숫자	없음	0에 가까운 값도 최소 이만큼은 보이게
`bar(name=, unit=, label=)`	문자열 / bool		툴팁·범례 이름, 단위, 막대 위 숫자
`on_click` `on_mouse_enter` …	이벤트		차트, `bar`, `cell` 모두 받음

쌓은 막대와 100% 막대

stack_id가 같은 bar들은 한 막대 위에 차례로 쌓입니다. 막대 전체 높이가 합계가 됩니다. 차트에 stack_offset="expand"를 주면 모든 막대의 높이가 같아지고, 각 부분의 비율만 남습니다.

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.flex(
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="coffee", stack_id="1", fill=rx.color("accent", 8)),
        rx.recharts.bar(data_key="tea", stack_id="1", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="store"),
        rx.recharts.y_axis(),
        rx.recharts.legend(),
        data=barchart_data,
        width="100%",
        height=250,
    ),
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="coffee", stack_id="1", fill=rx.color("accent", 8)),
        rx.recharts.bar(data_key="tea", stack_id="1", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="store"),
        rx.recharts.y_axis(),
        rx.recharts.legend(),
        data=barchart_data,
        stack_offset="expand",
        width="100%",
        height=250,
    ),
    direction="column",
    spacing="4",
    width="100%",
)

범위 막대

data_key가 가리키는 값이 숫자 하나가 아니라 [낮음, 높음] 두 개이면, 막대가 0이 아니라 낮은 값에서 시작해 높은 값에서 끝납니다. 하루의 최저·최고 기온처럼 범위를 보여 줄 때 씁니다.

rx.recharts.bar_chart(
    rx.recharts.bar(
        data_key="temperature",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 7),
    ),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=[
        {"day": "Mon", "temperature": [-1, 10]},
        {"day": "Tue", "temperature": [2, 15]},
        {"day": "Wed", "temperature": [3, 12]},
        {"day": "Thu", "temperature": [4, 12]},
        {"day": "Fri", "temperature": [12, 16]},
        {"day": "Sat", "temperature": [5, 16]},
        {"day": "Sun", "temperature": [0, 8]},
    ],
    width="100%",
    height=250,
)

막대 굵기와 간격

bar_size는 모든 막대의 굵기를 픽셀로 정하고, max_bar_size는 굵기의 최댓값을 정합니다. 아래 예제는 bar_size=100이지만 max_bar_size=24가 이겨서 막대가 24픽셀을 넘지 않습니다. 항목 수가 적을 때 막대가 너무 뚱뚱해지는 것을 막는 데 좋습니다.

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_chart(
    rx.recharts.bar(data_key="coffee", fill=rx.color("accent", 8)),
    rx.recharts.bar(data_key="tea", fill=rx.color("teal", 8)),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    data=barchart_data,
    bar_category_gap="15%",
    bar_gap=6,
    bar_size=100,
    max_bar_size=24,
    width="100%",
    height=250,
)

둥근 모서리와 그라디언트

radius에 숫자 하나를 주면 네 모서리가 모두 둥글어지고, [8, 8, 0, 0]처럼 리스트를 주면 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 따로 정합니다. 위쪽만 둥글게 하면 바닥에 붙은 막대처럼 보입니다. 채움 색은 영역 차트처럼 rx.el.svg.defs의 그라디언트를 url(#id)로 쓸 수 있습니다.

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_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.9),
            rx.el.svg.stop(offset="95%", stop_color=rx.color("accent", 9), stop_opacity=0.2),
            id="barchart_gradient",
            x1=0,
            y1=0,
            x2=0,
            y2=1,
        ),
    ),
    rx.recharts.bar(
        data_key="coffee",
        fill=rx.color("teal", 8),
        radius=8,
    ),
    rx.recharts.bar(
        data_key="tea",
        fill="url(#barchart_gradient)",
        radius=[8, 8, 0, 0],
    ),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=barchart_data,
    width="100%",
    height=250,
)

가로 막대 (layout)

layout="vertical"을 주면 막대가 왼쪽에서 오른쪽으로 뻗는 가로 막대 차트가 됩니다. x축은 숫자(type_="number"), y축은 항목(type_="category")으로 바꿉니다. 항목 이름이 길 때 읽기 편합니다.

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_chart(
    rx.recharts.bar(
        data_key="coffee",
        stroke=rx.color("accent", 8),
        fill=rx.color("accent", 4),
    ),
    rx.recharts.x_axis(type_="number"),
    rx.recharts.y_axis(data_key="store", type_="category"),
    data=barchart_data,
    layout="vertical",
    margin={"top": 20, "right": 20, "left": 20, "bottom": 20},
    width="100%",
    height=280,
)

State와 클릭

data에 State 값을 연결하면 값이 바뀔 때 막대가 애니메이션으로 자랍니다. 아래 차트는 아무 곳이나 누르면(bar_chart의 on_click) 숫자가 새로 정해집니다.

import random
from typing import Any


class BarChartLiveState(rx.State):
    data: list[dict[str, Any]] = [
        {"store": "North", "coffee": 4000, "tea": 2400},
        {"store": "South", "coffee": 3000, "tea": 1398},
        {"store": "East", "coffee": 2000, "tea": 5800},
        {"store": "West", "coffee": 2780, "tea": 3908},
    ]

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


rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.bar(data_key="coffee", fill=rx.color("accent", 8)),
    rx.recharts.bar(data_key="tea", fill=rx.color("teal", 8)),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    rx.recharts.legend(),
    on_click=BarChartLiveState.shuffle,
    data=BarChartLiveState.data,
    width="100%",
    height=280,
)

막대 하나하나에 다른 동작을 붙이려면 rx.recharts.cell을 씁니다. bar 안에 rx.foreach로 데이터 수만큼 cell을 만들면, 각 cell이 같은 순서의 막대를 맡습니다. 그 cell의 on_click에 그 항목의 이름을 넘겨, 누른 막대만 남기는 드릴다운을 만듭니다. 같은 막대를 다시 누르면 전체로 돌아갑니다.

foreach의 함수는 (item, index)를 받아 cell 하나를 돌려줍니다.
클릭 핸들러는 화면을 만들 때 그 항목의 값으로 묶입니다(toggle(item["name"].to(str))).
rx.cond로 고른 막대만 다른 색으로 칠합니다.
차트의 data 자체가 계산 변수(rows)라서, 고르면 차트가 그 항목만 다시 그립니다.

같은 방법은 파이 차트에서도 통합니다(pie 안에 cell을 넣습니다).

barchart_genres = [
    {"name": "Fiction", "count": 42},
    {"name": "History", "count": 28},
    {"name": "Science", "count": 35},
    {"name": "Biography", "count": 17},
    {"name": "Fantasy", "count": 24},
]

barchart_colors = ["#6366F1", "#8B5CF6", "#A855F7", "#D946EF", "#EC4899"]


class BarChartDrillState(rx.State):
    picked: str = ""

    @rx.var
    def rows(self) -> list[dict[str, str | int]]:
        if self.picked:
            return [g for g in barchart_genres if g["name"] == self.picked]
        return barchart_genres

    @rx.event
    def toggle(self, name: str):
        self.picked = "" if self.picked == name else name


rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.x_axis(data_key="name", tick_line=False, axis_line=False),
    rx.recharts.y_axis(allow_decimals=False, axis_line=False, tick_line=False),
    rx.recharts.bar(
        rx.foreach(
            BarChartDrillState.rows,
            lambda item, index: rx.recharts.cell(
                on_click=BarChartDrillState.toggle(item["name"].to(str)),
                custom_attrs={"cursor": "pointer"},
                fill=rx.cond(
                    BarChartDrillState.picked == item["name"],
                    "#1D4ED8",
                    rx.Var.create(barchart_colors)[index % 5],
                ),
            ),
        ),
        data_key="count",
        radius=[4, 4, 0, 0],
    ),
    rx.recharts.graphing_tooltip(),
    data=BarChartDrillState.rows,
    width="100%",
    height=280,
)

주문서 완성

지점마다 커피와 차 막대를 나란히 세우고, 위쪽만 둥글게 다듬었습니다. max_bar_size로 막대가 너무 굵어지지 않게 하고, 툴팁과 범례로 값과 이름을 읽게 합니다.

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.bar(data_key="coffee", name="Coffee", fill=rx.color("accent", 8), radius=[4, 4, 0, 0]),
    rx.recharts.bar(data_key="tea", name="Tea", fill=rx.color("teal", 8), radius=[4, 4, 0, 0]),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=barchart_data,
    bar_gap=2,
    max_bar_size=32,
    width="100%",
    height=300,
)

공방 노트

bar_chart(data=…) 안에 계열마다 bar(data_key=…)를 넣으면 나란히, stack_id를 맞추면 쌓인다.
stack_offset="expand"는 100% 막대, data_key 값이 [낮음, 높음]이면 범위 막대.
간격은 bar_category_gap·bar_gap, 굵기는 bar_size·max_bar_size, 모서리는 radius.
layout="vertical"이면 가로 막대. 축의 type_도 함께 바꾼다.
막대마다 다른 색이나 클릭은 bar 안에 foreach로 rx.recharts.cell을 넣는다.

← 이전

차트 · Area Chart

차트 · Line Chart

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex