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

차트 부품

Legend

rx.recharts.legend

공식 문서

공방 주문서

지점 세 곳의 주간 주문을 선 세 개로 그렸어요. 어느 선이 어느 지점인지 오른쪽 위에 표시해 주세요.

rx.recharts.legend는 차트의 각 계열이 무엇인지 알려 주는 범례입니다. 지도의 범례처럼, 색과 모양 옆에 계열 이름을 늘어놓습니다. 계열이 둘 이상인 차트라면 거의 언제나 넣습니다.

legend_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": 9800, "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.composed_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.bar(data_key="amt", bar_size=20, fill="#413ea0"),
    rx.recharts.line(data_key="pv", type_="monotone", stroke="#ff7300"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.legend(),
    data=legend_data,
    width="100%",
    height=300,
)

속성 바꿔 보기

범례의 방향과 자리, 아이콘 모양을 바꿔 봅니다. 아래 예제부터는 위에서 만든 legend_data를 그대로 씁니다.

속성 바꿔 보기

layout

align

vertical_align

icon_type

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv", stroke=rx.color("accent", 9)),
    rx.recharts.line(data_key="amt", stroke=rx.color("green", 9)),
    rx.recharts.line(data_key="uv", stroke=rx.color("red", 9)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.legend(
        layout="horizontal",
        align="center",
        vertical_align="bottom",
        icon_type="line",
    ),
    data=legend_data,
    width="100%",
    height=280,
)

layout은 항목을 늘어놓는 방향, align과 vertical_align은 차트 안에서 범례가 놓이는 자리입니다.

속성	값	기본값	쓰임
`layout`	`"horizontal"` `"vertical"`	`"horizontal"`	항목을 가로로, 또는 세로로
`align`	`"left"` `"center"` `"right"`	`"center"`	가로 방향 자리
`vertical_align`	`"top"` `"middle"` `"bottom"`	`"bottom"`	세로 방향 자리
`icon_type`	`"line"` `"plainline"` `"square"` `"rect"` `"circle"` `"cross"` `"diamond"` `"star"` `"triangle"` `"wye"`	계열마다 다름	항목 아이콘 모양
`icon_size`	숫자	`14`	아이콘 크기
`width` · `height`	숫자	자동	범례를 담는 상자 크기
`payload` · `chart_width` · `chart_height` · `margin`	-	자동	보통 차트가 계산하는 값
`on_click` · `on_mouse_enter` 등	이벤트	-	범례 항목에서 일어나는 이벤트(인자 없음)

크기와 자리를 함께 정하기

width와 height는 범례를 담는 상자의 크기입니다. layout="vertical", align="right", vertical_align="top"을 함께 주면 오른쪽 위에 세로로 쌓입니다. icon_size와 icon_type으로 아이콘도 바꿉니다.

rx.recharts.composed_chart(
    rx.recharts.line(data_key="pv", type_="monotone", stroke=rx.color("accent", 7)),
    rx.recharts.line(data_key="amt", type_="monotone", stroke=rx.color("green", 7)),
    rx.recharts.line(data_key="uv", type_="monotone", stroke=rx.color("red", 7)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.legend(
        width=60,
        height=100,
        layout="vertical",
        align="right",
        vertical_align="top",
        icon_size=15,
        icon_type="square",
    ),
    data=legend_data,
    width="100%",
    height=300,
)

범례에 보이는 이름과 아이콘

범례의 글자는 계열의 name이고, 없으면 data_key가 보입니다. 아이콘은 계열의 legend_type으로 하나씩 고를 수 있고, "none"을 주면 그 계열은 범례에서 빠집니다.

rx.recharts.bar_chart(
    rx.recharts.bar(data_key="uv", name="Visitors", fill=rx.color("accent", 8), legend_type="circle"),
    rx.recharts.bar(data_key="pv", name="Page views", fill=rx.color("teal", 8), legend_type="star"),
    rx.recharts.bar(data_key="amt", fill=rx.color("gray", 8), legend_type="none"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.legend(),
    data=legend_data,
    width="100%",
    height=280,
)

계열 숨기기

계열의 hide에 State 값을 연결하면 체크박스로 선을 켜고 끌 수 있습니다. 숨긴 계열도 범례에는 흐린 색으로 남아서, 무엇이 꺼져 있는지 알 수 있습니다. 범례의 on_click은 Reflex 0.10에서 어느 항목을 눌렀는지 넘겨주지 않으므로, 이런 조작은 차트 밖의 컨트롤로 합니다.

legend_toggle_data = [
    {"day": "Mon", "pv": 2400, "uv": 4000},
    {"day": "Tue", "pv": 1398, "uv": 3000},
    {"day": "Wed", "pv": 9800, "uv": 2000},
    {"day": "Thu", "pv": 3908, "uv": 2780},
    {"day": "Fri", "pv": 4800, "uv": 1890},
]


class LegendSeriesState(rx.State):
    show_pv: bool = True
    show_uv: bool = True

    @rx.event
    def set_show_pv(self, value: bool):
        self.show_pv = value

    @rx.event
    def set_show_uv(self, value: bool):
        self.show_uv = value


rx.vstack(
    rx.hstack(
        rx.checkbox("pv", checked=LegendSeriesState.show_pv, on_change=LegendSeriesState.set_show_pv),
        rx.checkbox("uv", checked=LegendSeriesState.show_uv, on_change=LegendSeriesState.set_show_uv),
        spacing="4",
    ),
    rx.recharts.line_chart(
        rx.recharts.line(data_key="pv", stroke=rx.color("accent", 9), hide=~LegendSeriesState.show_pv),
        rx.recharts.line(data_key="uv", stroke=rx.color("orange", 9), hide=~LegendSeriesState.show_uv),
        rx.recharts.x_axis(data_key="day"),
        rx.recharts.y_axis(),
        rx.recharts.legend(),
        data=legend_toggle_data,
        width="100%",
        height=260,
    ),
    width="100%",
)

주문서 완성

계열마다 name으로 지점 이름을 붙이고, 범례는 오른쪽 위에 작은 동그라미로 둡니다.

legend_weekly = [
    {"week": "W1", "seoul": 120, "busan": 80, "daegu": 45},
    {"week": "W2", "seoul": 150, "busan": 95, "daegu": 60},
    {"week": "W3", "seoul": 140, "busan": 110, "daegu": 72},
    {"week": "W4", "seoul": 180, "busan": 105, "daegu": 90},
]


rx.recharts.line_chart(
    rx.recharts.line(data_key="seoul", name="Seoul", stroke=rx.color("accent", 9)),
    rx.recharts.line(data_key="busan", name="Busan", stroke=rx.color("teal", 9)),
    rx.recharts.line(data_key="daegu", name="Daegu", stroke=rx.color("orange", 9)),
    rx.recharts.x_axis(data_key="week"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(vertical_align="top", align="right", icon_type="circle", icon_size=10),
    data=legend_weekly,
    width="100%",
    height=280,
)

공방 노트

legend()를 차트 자식으로 넣으면 계열마다 아이콘과 이름이 붙는다.
글자는 계열의 name(없으면 data_key), 아이콘은 legend_type. "none"이면 범례에서 빠진다.
layout으로 방향, align·vertical_align으로 자리, icon_type·icon_size로 아이콘.
계열의 hide에 State를 연결하면 켜고 끌 수 있다. 숨긴 계열은 범례에 흐리게 남는다.

← 이전

차트 부품 · Chart Tooltip

차트 부품 · Label

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex