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

차트 부품

Cartesian Grid

rx.recharts.cartesian_grid

공식 문서

공방 주문서

막대의 높이를 눈으로 읽기 쉽게, 차트 뒤에 옅은 가로줄만 깔아 주세요.

rx.recharts.cartesian_grid는 차트 뒤에 가로·세로 격자선을 그립니다. 값이 어느 눈금쯤인지 눈으로 따라가기 쉬워집니다. 선 차트, 막대 차트, 영역 차트, 산점도처럼 x·y 축이 있는 차트에 자식으로 넣습니다.

cgrid_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.line_chart(
    rx.recharts.line(data_key="pv"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="4 4"),
    data=cgrid_data,
    width="100%",
    height=300,
)

stroke_dasharray는 SVG의 stroke-dasharray와 같아서, 숫자를 쉼표나 공백으로 이어 "선 길이, 빈칸 길이"를 되풀이합니다. "5,5"는 5픽셀 선과 5픽셀 빈칸, "10,5,5,5"는 긴 선·빈칸·짧은 선·빈칸을 반복합니다. 비워 두면 실선입니다.

속성 바꿔 보기

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

속성 바꿔 보기

stroke_dasharray

horizontal

vertical

stroke

fill

fill_opacity

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(
        stroke_dasharray="4 4",
        horizontal=True,
        vertical=True,
        stroke=rx.color("gray", 7),
        fill=rx.color("indigo", 3),
        fill_opacity=0,
    ),
    data=cgrid_data,
    width="100%",
    height=280,
)

horizontal·vertical로 가로줄과 세로줄을 따로 켜고 끕니다. fill과 fill_opacity는 격자 칸의 바탕을 칠합니다.

속성	값	기본값	쓰임
`horizontal`	`True` / `False`	`True`	가로줄 보이기
`vertical`	`True` / `False`	`True`	세로줄 보이기
`stroke_dasharray`	`"4 4"`, `"5,5"` …	실선	점선 무늬
`stroke`	색	`rx.color("gray", 7)`	선 색
`fill` · `fill_opacity`	색 · `0`~`1`	없음	격자 칸 바탕과 그 불투명도
`horizontal_points` · `vertical_points`	픽셀 위치 리스트	`[]`	선을 그릴 자리를 직접 지정
`x` · `y` · `width` · `height`	숫자	`0`	격자의 위치와 크기. 보통 차트가 알아서 계산한다

한쪽 줄만 남기기

vertical=False로 세로줄을 끄면 가로줄만 남습니다. 막대나 영역의 높이를 읽는 데는 가로줄이면 충분해서, 화면이 한결 가벼워집니다.

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="2 4", vertical=False, horizontal=True),
    data=cgrid_data,
    width="100%",
    height=300,
)

옅게 깔기

class_name으로 격자선의 불투명도를 낮추면, 데이터보다 앞에 나서지 않는 참고선이 됩니다. 이 사이트는 Tailwind를 쓰므로 "opacity-25" 같은 클래스가 그대로 먹습니다.

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(horizontal=True, vertical=False, class_name="opacity-25"),
    data=cgrid_data,
    width="100%",
    height=300,
)

선 자리를 직접 정하기

horizontal_points와 vertical_points는 선을 그릴 자리를 리스트로 받습니다. 가로줄은 차트 위쪽 끝에서, 세로줄은 왼쪽 끝에서 잰 픽셀 거리입니다.

이 값은 축의 눈금 값이 아니라 화면 속 픽셀 위치라는 점에 주의합니다. 차트 크기가 바뀌어도 선은 같은 픽셀 자리에 남습니다. 특정 구간을 눈에 띄게 할 때 아껴 씁니다.

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


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=cgrid_points, fill="#8884d8"),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.cartesian_grid(
        stroke_dasharray="3 3",
        horizontal_points=[0, 25, 50],
        vertical_points=[65, 90, 115],
    ),
    width="100%",
    height=200,
)

주문서 완성

막대 차트에 세로줄 없이 옅은 점선 가로줄만 깔고, 축선과 눈금선도 지워 격자가 눈금 역할을 대신하게 합니다.

rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(vertical=False, stroke_dasharray="3 3", class_name="opacity-50"),
    rx.recharts.bar(data_key="uv", fill=rx.color("accent", 8), radius=[4, 4, 0, 0]),
    rx.recharts.x_axis(data_key="name", axis_line=False, tick_line=False),
    rx.recharts.y_axis(axis_line=False, tick_line=False),
    data=cgrid_data,
    width="100%",
    height=280,
)

공방 노트

cartesian_grid는 x·y 축이 있는 차트의 자식으로 넣는다.
stroke_dasharray="4 4"처럼 선·빈칸 길이를 되풀이해 점선을 만든다.
horizontal·vertical로 한쪽 줄만 남긴다. 막대·영역 차트는 가로줄이면 충분하다.
class_name="opacity-25"처럼 옅게 깔면 데이터가 앞에 선다.
horizontal_points·vertical_points는 눈금 값이 아니라 픽셀 위치다.

← 이전

차트 부품 · Axis

차트 부품 · Chart Tooltip

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex