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

차트 부품

Chart Tooltip

rx.recharts.graphing_tooltip

공식 문서

공방 주문서

막대에 마우스를 올리면 'Sales - 4000 won'처럼 이름과 값이 뜨는 작은 상자를 보여 주세요.

rx.recharts.graphing_tooltip은 차트의 점이나 막대에 마우스를 올렸을 때 뜨는 작은 상자입니다. 차트의 자식으로 넣기만 하면, 마우스 아래 x 값과 그 자리의 모든 계열 값을 보여 줍니다. rx.recharts.tooltip도 같은 컴포넌트입니다.

글자나 버튼에 붙이는 rx.tooltip(오버레이)과는 다른 컴포넌트입니다. 차트 안에서는 이 페이지의 것을 씁니다.

ctooltip_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.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    data=ctooltip_data,
    width="100%",
    height=300,
)

속성 바꿔 보기

차트 위에 마우스를 올린 채 값을 바꿔 봅니다. 아래 예제부터는 위에서 만든 ctooltip_data를 그대로 씁니다.

속성 바꿔 보기

separator

cursor

is_animation_active

animation_easing

background

rx.recharts.bar_chart(
    rx.recharts.bar(data_key="uv", fill=rx.color("accent", 8)),
    rx.recharts.bar(data_key="pv", fill=rx.color("teal", 8)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(
        separator=" : ",
        cursor=True,
        is_animation_active=True,
        animation_easing="ease",
        content_style={"background": rx.color("gray", 2), "borderRadius": "8px"},
    ),
    data=ctooltip_data,
    width="100%",
    height=260,
)

separator는 이름과 값 사이 글자입니다. cursor를 끄면 마우스 아래 회색 띠가 사라집니다.

속성	값	기본값	쓰임
`separator`	문자열	`":"`	이름과 값 사이 글자
`cursor`	`True` / `False`, dict	`{"strokeWidth": 1, "fill": rx.color("gray", 3)}`	마우스 아래 강조 띠. `False`면 없음
`content_style`	style dict	회색 바탕, 둥근 모서리	상자 안쪽 꾸미기
`wrapper_style`	style dict	`{}`	상자를 감싸는 바깥 요소 꾸미기
`item_style` · `label_style`	style dict	회색 12 · 회색 11 글자	값 한 줄(li), 맨 위 x 값(p) 꾸미기
`position`	`{"x": …, "y": …}`	-	정하면 그 자리에 고정
`offset`	숫자	`10`	마우스와 상자 사이 거리
`allow_escape_view_box`	`{"x": bool, "y": bool}`	둘 다 `False`	차트 영역 밖으로 나가도 되는지
`view_box`	`{"x", "y", "width", "height"}`	자동	상자가 머물 영역. 보통 자동 계산
`filter_null`	`True` / `False`	`True`	값이 없는(None) 계열을 뺄지
`active`	`True` / `False`	자동	강제로 보이거나 숨기기
`is_animation_active` · `animation_duration` · `animation_easing`	bool · ms · 이징 이름	`True` · `1500` · `"ease"`	상자가 따라 움직이는 애니메이션

꾸미기와 고정 위치

wrapper_style은 바깥 껍데기, content_style은 안쪽 상자를 꾸밉니다. item_style은 값 한 줄, label_style은 맨 위의 x 값입니다. 모두 CSS 속성을 camelCase로 쓴 dict입니다.

position을 주면 상자가 마우스를 따라다니지 않고 그 자리에 머뭅니다. allow_escape_view_box는 상자가 차트 영역 밖으로 나가도 되는지를 x·y 방향마다 정하고, view_box는 상자가 머물 영역의 크기입니다.

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.graphing_tooltip(
        separator=" - ",
        view_box={"width": 675, "height": 300},
        allow_escape_view_box={"x": True, "y": False},
        wrapper_style={"backgroundColor": rx.color("accent", 3), "borderRadius": "8px", "padding": "10px"},
        content_style={"backgroundColor": rx.color("accent", 4), "borderRadius": "4px", "padding": "8px"},
        item_style={"color": rx.color("accent", 11)},
        label_style={"fontWeight": "bold"},
        position={"x": 80, "y": 0},
        is_animation_active=False,
    ),
    data=ctooltip_data,
    width="100%",
    height=300,
)

빈 값 다루기: filter_null

데이터에 None이 있으면 기본(filter_null=True)은 그 계열을 상자에서 뺍니다(왼쪽). False로 두면 이름은 남고 값만 빈칸이 됩니다(오른쪽). Tue와 Thu에 마우스를 올려 비교해 봅니다.

ctooltip_gaps = [
    {"day": "Mon", "shop": 120, "online": 80},
    {"day": "Tue", "shop": 150, "online": None},
    {"day": "Wed", "shop": 90, "online": 110},
    {"day": "Thu", "shop": None, "online": 130},
    {"day": "Fri", "shop": 170, "online": 140},
]


rx.flex(
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="shop", fill=rx.color("accent", 8)),
        rx.recharts.bar(data_key="online", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="day"),
        rx.recharts.graphing_tooltip(),
        data=ctooltip_gaps,
        width=280,
        height=200,
    ),
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="shop", fill=rx.color("accent", 8)),
        rx.recharts.bar(data_key="online", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="day"),
        rx.recharts.graphing_tooltip(filter_null=False),
        data=ctooltip_gaps,
        width=280,
        height=200,
    ),
    spacing="4",
    wrap="wrap",
)

주문서 완성

계열에 name을 주면 상자에 uv 대신 그 이름이, unit을 주면 값 뒤에 단위가 붙습니다. 구분자는 " - ", 마우스 아래 띠는 강조 색으로 바꿉니다.

rx.recharts.bar_chart(
    rx.recharts.bar(data_key="uv", name="Sales", unit=" won", fill=rx.color("accent", 8), radius=[4, 4, 0, 0]),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(
        separator=" - ",
        cursor={"fill": rx.color("accent", 3)},
        content_style={"background": rx.color("gray", 1), "border": "none", "borderRadius": "10px", "boxShadow": "0 4px 14px rgba(0,0,0,0.12)"},
        item_style={"color": rx.color("accent", 11), "fontWeight": "bold"},
    ),
    data=ctooltip_data,
    width="100%",
    height=280,
)

공방 노트

graphing_tooltip(또는 recharts.tooltip)을 차트 자식으로 넣으면 끝. rx.tooltip과는 다르다.
상자에 보이는 이름·단위는 계열의 name·unit에서 온다.
separator, cursor, content_style·wrapper_style·item_style·label_style로 꾸민다.
position으로 고정하고, allow_escape_view_box로 차트 밖까지 나가게 한다.
filter_null=False면 None인 계열도 이름은 남는다.

← 이전

차트 부품 · Cartesian Grid

차트 부품 · Legend

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex