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

차트

Radial Bar Chart

rx.recharts.radial_bar_chartrx.recharts.radial_bar

공식 문서

공방 주문서

팀 세 곳의 이번 분기 목표 달성률을 동그란 진행 막대로, 대시보드 한 칸에 들어가게 보여 주세요.

rx.recharts.radial_bar_chart는 막대를 직선 대신 원을 따라 휘어 그리는 차트입니다. 막대의 길이(각도)가 값의 크기이고, 막대마다 중심에서의 거리가 다릅니다. 항목이 적고 공간이 좁을 때, 또는 목표 대비 진행률을 보여 줄 때 씁니다.

데이터의 각 dict에 "fill"을 넣으면 그 막대의 색이 됩니다. min_angle은 아주 작은 값도 최소 그 각도만큼은 보이게 합니다.

radialbarchart_data = [
    {"name": "Mon", "x": 3, "fill": rx.color("cyan", 9)},
    {"name": "Tue", "x": 4, "fill": rx.color("blue", 9)},
    {"name": "Wed", "x": 5, "fill": rx.color("orange", 9)},
    {"name": "Thu", "x": 6, "fill": rx.color("red", 9)},
    {"name": "Fri", "x": 7, "fill": rx.color("gray", 9)},
    {"name": "Sat", "x": 8, "fill": rx.color("green", 9)},
]


rx.recharts.radial_bar_chart(
    rx.recharts.radial_bar(data_key="x", min_angle=15),
    data=radialbarchart_data,
    width="100%",
    height=320,
)

속성 바꿔 보기

차트의 inner_radius·outer_radius는 막대들이 놓일 고리의 안쪽과 바깥을 정하고, bar_category_gap은 막대 사이 간격입니다. background를 켜면 막대가 다 찼을 때의 자리가 옅게 보입니다.

속성 바꿔 보기

inner_radius

outer_radius

bar_category_gap

background

label

rx.recharts.radial_bar_chart(
    rx.recharts.radial_bar(
        data_key="x",
        min_angle=15,
        background=False,
        label=False,
    ),
    rx.recharts.graphing_tooltip(),
    data=radialbarchart_data,
    inner_radius="30%",
    outer_radius="100%",
    bar_category_gap="10%",
    width="100%",
    height=320,
)

label을 켜면 막대마다 값이 붙습니다. 데이터는 위의 radialbarchart_data입니다.

속성	값	기본값	쓰임
`radial_bar_chart(data=)`	dict의 리스트	없음	막대마다 dict 하나. `"fill"` 키로 색
`radial_bar_chart(cx=, cy=)`	숫자·퍼센트	`"50%"`	중심 위치
`radial_bar_chart(inner_radius=, outer_radius=)`	숫자·퍼센트	`"30%"` / `"100%"`	막대가 놓일 고리
`radial_bar_chart(start_angle=, end_angle=)`	숫자(도)	`0` / `360`	막대가 도는 범위와 방향
`radial_bar_chart(bar_category_gap=, bar_gap=, bar_size=)`	퍼센트·숫자	`"10%"` / `4` / 자동	막대 간격과 굵기
`radial_bar_chart(margin=)`	dict	5씩	둘레 여백
`radial_bar(data_key=)`	문자열	없음	막대 길이가 될 값
`radial_bar(min_angle=)`	숫자(도)	없음	작은 값의 최소 각도
`radial_bar(background=)`	`True` / `False` / dict	없음	빈 자리 배경
`radial_bar(label=)`	`True` / `False` / dict	없음	값 표시. dict로 `fill`·`position`
`radial_bar(legend_type=)`	범례 아이콘		범례 모양
`radial_bar(animation_begin=, animation_duration=, animation_easing=)`			등장 애니메이션
이벤트	`on_click` `on_mouse_enter` `on_mouse_leave` `on_mouse_move`		차트 영역의 마우스 이벤트

반원과 라벨 (고급 예제)

start_angle=180, end_angle=0이면 막대가 왼쪽에서 오른쪽으로 반원을 그립니다. label에 dict를 주면 값 글자의 색(fill)과 위치(position)를 정할 수 있고, "insideStart"는 막대가 시작하는 쪽 안에 글자를 둡니다. background=True는 막대 뒤에 빈 트랙을 깔아 줍니다.

rx.recharts.radial_bar_chart(
    rx.recharts.radial_bar(
        data_key="uv",
        min_angle=90,
        background=True,
        label={"fill": "#666", "position": "insideStart"},
    ),
    data=[
        {"name": "18-24", "uv": 31.47, "fill": "#8884d8"},
        {"name": "25-29", "uv": 26.69, "fill": "#83a6ed"},
        {"name": "30-34", "uv": 15.69, "fill": "#8dd1e1"},
        {"name": "35-39", "uv": 8.22, "fill": "#82ca9d"},
        {"name": "40-49", "uv": 8.63, "fill": "#a4de6c"},
        {"name": "50+", "uv": 2.63, "fill": "#d0ed57"},
    ],
    inner_radius="10%",
    outer_radius="80%",
    start_angle=180,
    end_angle=0,
    width="100%",
    height=300,
)

진행률 게이지

값을 "100점 만점 중 몇"으로 보이려면 각도 축의 범위를 고정해야 합니다. 각도 축 polar_angle_axis에 숫자 축(type: "number")과 범위(domain: [0, 100])를 주면 한 바퀴가 100이 됩니다. 0.10의 polar_angle_axis에는 이 두 속성이 따로 없어서, custom_attrs로 Recharts에 그대로 넘깁니다. 이 축이 없으면 가장 큰 값이 한 바퀴를 다 채웁니다. start_angle=90, end_angle=-270은 12시 방향에서 시작해 시계 방향으로 돕니다.

rx.recharts.radial_bar_chart(
    rx.recharts.polar_angle_axis(custom_attrs={"type": "number", "domain": [0, 100]}, tick=False, axis_line=False),
    rx.recharts.radial_bar(
        data_key="value",
        background=True,
        label={"fill": rx.color("gray", 12), "position": "center"},
    ),
    data=[{"name": "Goal", "value": 72, "fill": rx.color("accent", 9)}],
    inner_radius="70%",
    outer_radius="100%",
    start_angle=90,
    end_angle=-270,
    width="100%",
    height=220,
)

언제 쓰나

대시보드 한 칸처럼 좁은 자리에 항목 몇 개의 크기를 넣을 때
목표 대비 진행률을 여러 개 겹쳐 보여 줄 때

막대 길이가 각도라서, 바깥 막대와 안쪽 막대는 같은 값이라도 길이가 달라 보입니다. 값을 정확히 비교해야 하면 막대 차트가 더 낫습니다. 모양은 inner_radius, outer_radius, start_angle, end_angle, bar_size로 다듬습니다.

주문서 완성

각도 축을 0~100으로 고정해 세 팀의 달성률을 같은 기준으로 그렸습니다. 범례를 오른쪽에 세로로 세워 팀 이름을 읽게 하고, label로 막대 안에 숫자를 넣었습니다.

rx.recharts.radial_bar_chart(
    rx.recharts.polar_angle_axis(custom_attrs={"type": "number", "domain": [0, 100]}, tick=False, axis_line=False),
    rx.recharts.radial_bar(
        data_key="done",
        background=True,
        label={"fill": rx.color("gray", 12), "position": "insideStart"},
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(icon_size=10, layout="vertical", vertical_align="middle", align="right"),
    data=[
        {"name": "Sales", "done": 82, "fill": rx.color("indigo", 9)},
        {"name": "Support", "done": 64, "fill": rx.color("teal", 9)},
        {"name": "Design", "done": 45, "fill": rx.color("orange", 9)},
    ],
    inner_radius="30%",
    outer_radius="100%",
    start_angle=90,
    end_angle=-270,
    width="100%",
    height=280,
)

공방 노트

radial_bar_chart(data=…) 안에 radial_bar(data_key=…)를 넣는다. 막대 색은 데이터의 "fill".
고리는 inner_radius·outer_radius, 방향은 start_angle·end_angle(180→0이면 반원).
min_angle로 작은 값도 보이게, background=True로 빈 트랙을 깐다.
진행률은 polar_angle_axis(custom_attrs={"type": "number", "domain": [0, 100]})로 한 바퀴를 100에 고정한다.
정확한 비교가 필요하면 막대 차트를 쓴다.

← 이전

차트 · Radar Chart

차트 · Scatter Chart

새 교시·새 강의 소식 받기

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