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

차트 부품

Reference

rx.recharts.reference_linerx.recharts.reference_dotrx.recharts.reference_area

공식 문서

공방 주문서

월 매출 차트에 목표선 5000을 긋고, 할인 행사 기간은 색으로 칠하고, 최고 달에는 점을 찍어 주세요.

기준 부품은 데이터와 따로, 차트 위에 "여기를 보세요"라는 표시를 얹습니다. reference_line은 한 값에 가로선이나 세로선을, reference_area는 구간에 칠한 사각형을, reference_dot은 한 좌표에 점을 그립니다. 목표치, 평균, 이상치, 행사 기간처럼 해석을 돕는 표시에 씁니다.

reference_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.area_chart(
    rx.recharts.area(data_key="pv", stroke=rx.color("accent", 8), fill=rx.color("accent", 7)),
    rx.recharts.reference_line(y=4343, stroke=rx.color("green", 10), label="Average"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=reference_data,
    width="100%",
    height=300,
)

속성 바꿔 보기

기준선의 생김새를 바꿔 봅니다. 아래 예제부터는 위에서 만든 reference_data를 그대로 씁니다.

속성 바꿔 보기

label

stroke

stroke_width

stroke_dasharray

rx.recharts.area_chart(
    rx.recharts.area(data_key="pv", stroke=rx.color("accent", 8), fill=rx.color("accent", 5)),
    rx.recharts.reference_line(
        y=4343,
        label="Average",
        stroke=rx.color("green", 10),
        stroke_width=1,
        stroke_dasharray="",
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=reference_data,
    width="100%",
    height=280,
)

label은 선 위에 글자를 얹고, stroke_dasharray는 선을 점선으로 만듭니다.

속성	값	대상	쓰임
`x` · `y`	숫자 또는 범주 값	line · dot	선을 긋거나 점을 찍을 자리. 범주 축이면 범주 이름
`x1` `x2` `y1` `y2`	숫자 또는 범주 값	area	사각형의 경계. x 쪽을 빼면 x 방향 전체, y 쪽을 빼면 y 방향 전체
`segment`	`[{"x", "y"}, {"x", "y"}]`	line	두 끝점을 잇는 비스듬한 선
`r`	숫자	dot	점의 반지름
`label`	문자열, 숫자	line · dot	글자 붙이기. 더 꾸미려면 `rx.recharts.label`을 자식으로
`stroke` · `fill` · `fill_opacity`	색 · 색 · `0`~`1`	모두	선 색, 칠 색, 칠 불투명도
`stroke_width` · `stroke_dasharray`	숫자 · `"4 4"`	line	선 굵기(기본 `1`), 점선 무늬
`if_overflow`	`"discard"` `"hidden"` `"visible"` `"extendDomain"`	모두	축 범위를 벗어났을 때 처리(기본 `"discard"`)
`x_axis_id` · `y_axis_id`	축 id	모두	축이 여러 개일 때 어느 축 기준인지
`on_click` 등	이벤트	dot	점을 누르거나 마우스를 올릴 때(인자 없음)

Reference Area: 구간 칠하기

reference_area는 x1~~x2, y1~~y2로 사각형을 그립니다. 숫자 축이면 숫자, 범주 축이면 범주 이름을 씁니다. fill_opacity를 낮춰야 아래 데이터가 비쳐 보입니다.

reference_points = [
    {"x": 45, "y": 100}, {"x": 100, "y": 200}, {"x": 120, "y": 100}, {"x": 170, "y": 300},
    {"x": 140, "y": 250}, {"x": 150, "y": 400}, {"x": 110, "y": 280}, {"x": 80, "y": 150},
    {"x": 200, "y": 350}, {"x": 90, "y": 220}, {"x": 130, "y": 320}, {"x": 180, "y": 120},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=reference_points, fill="#8884d8", name="A"),
    rx.recharts.reference_area(x1=150, x2=180, y1=150, y2=300, fill="#8884d8", fill_opacity=0.3),
    rx.recharts.x_axis(data_key="x", name="x", type_="number"),
    rx.recharts.y_axis(data_key="y", name="y", type_="number"),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Reference Line: 선 긋기

y를 주면 그 값에 가로선, x를 주면 세로선이 생깁니다. x축이 범주 축이면 x="Page C"처럼 범주 이름을 씁니다. segment에 두 끝점을 주면 비스듬한 선도 그릴 수 있습니다(주황 점선).

rx.recharts.area_chart(
    rx.recharts.area(data_key="pv", stroke=rx.color("accent", 8), fill=rx.color("accent", 7)),
    rx.recharts.reference_line(x="Page C", stroke=rx.color("accent", 10), label="Max PV PAGE"),
    rx.recharts.reference_line(y=9800, stroke=rx.color("green", 10), label="Max"),
    rx.recharts.reference_line(y=4343, stroke=rx.color("green", 10), label="Average"),
    rx.recharts.reference_line(
        segment=[{"x": "Page A", "y": 2400}, {"x": "Page G", "y": 4300}],
        stroke=rx.color("orange", 9),
        stroke_dasharray="6 3",
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=reference_data,
    width="100%",
    height=300,
)

Reference Dot: 점 찍기

reference_dot은 x, y 좌표에 반지름 r인 점을 찍습니다. 눈여겨볼 데이터 점을 둘러싸거나, 데이터에 없는 기준점을 표시할 때 씁니다. 아래는 앞의 reference_points를 씁니다.

rx.recharts.scatter_chart(
    rx.recharts.scatter(data=reference_points, fill=rx.color("accent", 9), name="A"),
    rx.recharts.x_axis(data_key="x", name="x", type_="number"),
    rx.recharts.y_axis(data_key="y", name="y", type_="number"),
    rx.recharts.reference_dot(x=160, y=350, r=15, fill=rx.color("accent", 5), stroke=rx.color("accent", 10)),
    rx.recharts.reference_dot(x=170, y=300, r=20, fill=rx.color("accent", 7)),
    rx.recharts.reference_dot(x=90, y=220, r=18, fill=rx.color("green", 7)),
    width="100%",
    height=240,
)

축 범위를 벗어나면: if_overflow

데이터 최댓값은 4000인데 기준선을 6000에 그으면, 기본값 "discard"는 선을 아예 그리지 않습니다(왼쪽). "extendDomain"은 축 범위를 늘려 선이 보이게 합니다(오른쪽). "hidden"은 영역 밖을 잘라 내고, "visible"은 밖으로 나가도 그립니다.

rx.flex(
    rx.recharts.line_chart(
        rx.recharts.line(data_key="uv"),
        rx.recharts.reference_line(y=6000, label="discard", stroke=rx.color("red", 9)),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=reference_data,
        width=280,
        height=200,
    ),
    rx.recharts.line_chart(
        rx.recharts.line(data_key="uv"),
        rx.recharts.reference_line(y=6000, label="extendDomain", stroke=rx.color("red", 9), if_overflow="extendDomain"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=reference_data,
        width=280,
        height=200,
    ),
    spacing="4",
    wrap="wrap",
)

State로 기준 옮기기

y 같은 자리 값에도 State를 연결할 수 있습니다. 슬라이더로 목표를 바꾸면 선이 따라 움직이고, 목표를 넘은 달의 수도 함께 바뀝니다.

Goal

5000

3 months reached

reference_sales = [
    {"month": "Jan", "sales": 3200}, {"month": "Feb", "sales": 4100}, {"month": "Mar", "sales": 5600},
    {"month": "Apr", "sales": 4700}, {"month": "May", "sales": 6300}, {"month": "Jun", "sales": 5900},
]


class ReferenceGoalState(rx.State):
    goal: int = 5000

    @rx.event
    def set_goal(self, value: list[float]):
        self.goal = int(value[0])

    @rx.var
    def hits(self) -> int:
        return sum(1 for row in reference_sales if row["sales"] >= self.goal)


rx.vstack(
    rx.hstack(
        rx.text("Goal", size="2"),
        rx.slider(value=[ReferenceGoalState.goal], min=2000, max=7000, step=100, on_change=ReferenceGoalState.set_goal, width="200px"),
        rx.badge(ReferenceGoalState.goal),
        rx.text(ReferenceGoalState.hits, " months reached", size="2"),
        align="center",
        wrap="wrap",
    ),
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="sales", fill=rx.color("accent", 8)),
        rx.recharts.reference_line(y=ReferenceGoalState.goal, stroke=rx.color("red", 9), stroke_dasharray="4 4"),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(domain=[0, 7000]),
        data=reference_sales,
        width="100%",
        height=260,
    ),
    width="100%",
)

점 누르기

reference_dot에는 on_click 같은 마우스 이벤트가 있습니다. 이벤트가 따로 값을 넘겨주지 않으므로, 아래처럼 핸들러에 인자를 직접 넣어 어느 점인지 알려 줍니다.

Click a marked dot

reference_click_points = [
    {"x": 45, "y": 100}, {"x": 100, "y": 200}, {"x": 120, "y": 100}, {"x": 170, "y": 300},
    {"x": 140, "y": 250}, {"x": 150, "y": 400}, {"x": 110, "y": 280}, {"x": 80, "y": 150},
]


class ReferenceDotState(rx.State):
    picked: str = "Click a marked dot"

    @rx.event
    def pick(self, name: str):
        self.picked = name


rx.vstack(
    rx.recharts.scatter_chart(
        rx.recharts.scatter(data=reference_click_points, fill=rx.color("gray", 8)),
        rx.recharts.x_axis(data_key="x", type_="number"),
        rx.recharts.y_axis(data_key="y", type_="number"),
        rx.recharts.reference_dot(x=150, y=400, r=14, fill=rx.color("red", 7), on_click=ReferenceDotState.pick("Highest")),
        rx.recharts.reference_dot(x=45, y=100, r=14, fill=rx.color("blue", 7), on_click=ReferenceDotState.pick("Lowest")),
        width="100%",
        height=220,
    ),
    rx.text(ReferenceDotState.picked, size="2", weight="bold"),
    width="100%",
)

주문서 완성

행사 기간은 reference_area, 목표는 reference_line, 최고 달은 reference_dot입니다. 영역을 계열보다 먼저 넣어야 선 뒤에 깔립니다. 위의 reference_sales를 씁니다.

rx.recharts.line_chart(
    rx.recharts.reference_area(
        rx.recharts.label(value="Sale week", position="insideTop"),
        x1="Mar",
        x2="Apr",
        fill=rx.color("amber", 5),
        fill_opacity=0.4,
    ),
    rx.recharts.line(data_key="sales", stroke=rx.color("accent", 9)),
    rx.recharts.reference_line(
        rx.recharts.label(value="Goal 5000", position="insideTopLeft"),
        y=5000,
        stroke=rx.color("red", 9),
        stroke_dasharray="4 4",
    ),
    rx.recharts.reference_dot(x="May", y=6300, r=8, fill=rx.color("green", 9), stroke="white"),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    data=reference_sales,
    width="100%",
    height=280,
)

공방 노트

reference_line은 x나 y 한 값에 선, segment로 비스듬한 선.
reference_area는 x1·x2·y1·y2 사각형. fill_opacity를 낮춰 데이터가 비치게.
reference_dot은 x·y에 반지름 r인 점. on_click에는 인자를 직접 넣어 구별한다.
축 범위 밖이면 기본은 안 그린다. if_overflow="extendDomain"으로 축을 늘린다.
글자는 label="…" 또는 rx.recharts.label 자식. 그리는 순서가 곧 겹치는 순서다.

← 이전

차트 부품 · Label

차트 부품 · Brush

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex