ReflexKR

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 の文字	値の1行（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 は値の1行、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

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について

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

Built with Reflex