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

차트 부품

Label

rx.recharts.labelrx.recharts.label_list

공식 문서

공방 주문서

막대마다 위에 숫자를 바로 적어 주고, 가로축 아래에는 'Pages'라고 이름을 써 주세요.

차트 안에 글자를 쓰는 부품은 둘입니다. rx.recharts.label은 축이나 기준선 같은 한 자리에 글자 하나를 붙이고, rx.recharts.label_list는 계열의 데이터 점마다 값을 하나씩 자동으로 적습니다. 막대 위 숫자는 label_list, 축 이름은 label입니다.

label_data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 5800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]


rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top"),
        data_key="uv",
        fill=rx.color("accent", 8),
    ),
    rx.recharts.x_axis(
        rx.recharts.label(value="center", position="center", offset=30),
        rx.recharts.label(value="inside left", position="insideLeft", offset=10),
        rx.recharts.label(value="inside right", position="insideRight", offset=10),
        height=50,
    ),
    data=label_data,
    margin={"left": 20, "right": 20, "top": 20, "bottom": 20},
    width="100%",
    height=250,
)

label은 x_axis의 자식으로 들어가 축에 붙습니다. value가 글자, position이 자리, offset이 그 자리에서 미는 거리입니다. label_list는 bar의 자식으로 들어가고, data_key 열의 값을 막대마다 적습니다.

속성 바꿔 보기

아래 예제부터는 위에서 만든 label_data를 그대로 씁니다.

속성 바꿔 보기

list_position

list_fill

value

position

rx.recharts.bar_chart(
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top", fill=rx.color("gray", 11)),
        data_key="uv",
        fill=rx.color("accent", 6),
    ),
    rx.recharts.x_axis(
        rx.recharts.label(value="Pages", position="center"),
        data_key="name",
        height=50,
    ),
    data=label_data,
    margin={"top": 20, "left": 20, "right": 20},
    width="100%",
    height=280,
)

label_list의 position은 막대를 기준으로, label의 position은 축 영역을 기준으로 자리를 잡습니다.

rx.recharts.label

속성	값	기본값	쓰임
`value`	문자열	-	보일 글자
`position`	`"top"` `"left"` `"right"` `"bottom"` `"inside"` `"outside"` `"insideLeft"` `"insideRight"` `"insideTop"` `"insideBottom"` `"insideTopLeft"` `"insideBottomLeft"` `"insideTopRight"` `"insideBottomRight"` `"insideStart"` `"insideEnd"` `"end"` `"center"`	-	부모 영역 안에서의 자리
`offset`	숫자	-	그 자리에서 밀어내는 거리
`view_box`	dict	자동	기준 영역. 보통 자동 계산

rx.recharts.label_list

속성	값	기본값	쓰임
`data_key`	열 이름	-	점마다 적을 값의 열
`position`	`label`과 같은 18가지	-	막대·점을 기준으로 한 자리
`offset`	숫자	`5`	그 자리에서 떨어지는 거리
`fill`	색	`rx.color("gray", 10)`	글자 색
`stroke`	색	`"none"`	글자 테두리 색

계열마다 값 적기: label_list

label_list는 자기를 품은 계열의 데이터 점마다 글자를 적습니다. 막대가 둘이면 막대마다 label_list를 하나씩 넣고, data_key로 어느 열의 값을 적을지 정합니다.

rx.recharts.bar_chart(
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top"),
        data_key="uv",
        stroke="#8884d8",
        fill="#8884d8",
    ),
    rx.recharts.bar(
        rx.recharts.label_list(data_key="pv", position="top"),
        data_key="pv",
        stroke="#82ca9d",
        fill="#82ca9d",
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    margin={"left": 10, "right": 0, "top": 20, "bottom": 10},
    data=label_data,
    width="100%",
    height=300,
)

글자 꾸미기

label에 속성으로 없는 꾸밈은 custom_attrs로 Recharts에 그대로 넘깁니다. 글자 크기와 굵기를 정하고, 세로축 이름은 angle을 270으로 돌려 축을 따라 세웁니다.

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.x_axis(
        rx.recharts.label(value="Pages", position="center", custom_attrs={"fontSize": "12px", "fontWeight": "700"}),
        data_key="name",
        height=60,
    ),
    rx.recharts.y_axis(
        rx.recharts.label(value="Views", position="left", custom_attrs={"angle": 270, "fontSize": "12px", "fontWeight": "700"}),
    ),
    data=label_data,
    margin={"left": 20, "right": 20, "top": 25},
    width="100%",
    height=300,
)

기준선과 영역에 붙이기

label은 축 말고도 reference_line, reference_dot, reference_area의 자식이 될 수 있습니다. 목표선에 "Goal", 강조 구간에 이름을 붙일 때 씁니다. 글자 색도 custom_attrs의 fill로 정합니다.

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv", stroke=rx.color("accent", 9)),
    rx.recharts.reference_line(
        rx.recharts.label(value="Goal 5000", position="insideTopRight", custom_attrs={"fill": rx.color("red", 11)}),
        y=5000,
        stroke=rx.color("red", 9),
        stroke_dasharray="4 4",
    ),
    rx.recharts.reference_area(
        rx.recharts.label(value="Campaign", position="insideTop"),
        x1="Page C",
        x2="Page E",
        fill=rx.color("amber", 5),
        fill_opacity=0.4,
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=label_data,
    width="100%",
    height=280,
)

주문서 완성

label_list를 둘 넣어 막대 위에는 값, 막대 안쪽 아래에는 페이지 이름을 적습니다. 이름이 막대에 있으니 축 눈금은 끄고, 축 아래에 label로 "Pages"만 남깁니다.

rx.recharts.bar_chart(
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top", fill=rx.color("gray", 11)),
        rx.recharts.label_list(data_key="name", position="insideBottom", fill="white", offset=10),
        data_key="uv",
        fill=rx.color("accent", 9),
        radius=[4, 4, 0, 0],
    ),
    rx.recharts.x_axis(
        rx.recharts.label(value="Pages", position="insideBottom", custom_attrs={"fontWeight": "700"}),
        tick=False,
        height=30,
    ),
    data=label_data,
    margin={"top": 20},
    width="100%",
    height=280,
)

공방 노트

label은 한 자리에 글자 하나, label_list는 데이터 점마다 값 하나.
label은 x_axis·y_axis·reference_* 의 자식, label_list는 bar·line·area 같은 계열의 자식.
value·position·offset으로 글자와 자리를 정한다. position은 18가지.
속성으로 없는 꾸밈(fontSize, fontWeight, angle)은 custom_attrs로 넘긴다.

← 이전

차트 부품 · Legend

차트 부품 · Reference

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex