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

チャートの部品

Axis

rx.recharts.x_axisrx.recharts.y_axisrx.recharts.z_axis

公式ドキュメント

工房の注文書

月別訪問数のチャートに「月」と「訪問数」の軸名を付け、売上は右側の軸に別に表示してください。

軸はチャートの物差しを決める部品です。rx.recharts.x_axis と rx.recharts.y_axis をチャートの子として入れると横・縦の目盛りができ、data_key でどの列を目盛りに使うかを選びます。散布図で点の大きさを決める3つ目の軸は rx.recharts.z_axis です。

axis_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="uv", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.x_axis(data_key="name", label={"value": "Pages", "position": "bottom"}),
    rx.recharts.y_axis(data_key="uv", label={"value": "Views", "angle": -90, "position": "left"}),
    data=axis_data,
    width="100%",
    height=300,
    margin={"bottom": 40, "left": 40, "right": 40},
)

label に dict を渡すと、軸の横に名前が付きます。value は文字、position は位置、angle は回転角度です。軸名はチャートの外側にはみ出すので、チャートの margin で場所を空けておきます。

プロパティを変えてみる

軸の向きと目盛りの表示を変えてみます。ここから下の例では、上で作った axis_data をそのまま使います。

プロパティを変えてみる

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv"),
    rx.recharts.x_axis(data_key="name", orientation="bottom", interval="preserveEnd", axis_line=True, tick_line=True, hide=False),
    rx.recharts.y_axis(orientation="left", mirror=False, reversed=False),
    data=axis_data,
    width="100%",
    height=260,
)

orientation で軸を反対側に移し、mirror で目盛りの文字をチャートの内側に置きます。reversed は目盛りの順序を逆にします。

プロパティ	値	既定値	用途
`data_key`	列名	-	目盛りに使うデータの列
`type_`	`"number"` `"category"` `"auto"`	x は category、y は number	数値の軸かカテゴリの軸か
`domain`	`[最小, 最大]`	`[0, "auto"]`	数値軸の範囲。`"auto"`、`"dataMin"`、`"dataMax"` も使える
`allow_data_overflow`	`True` / `False`	`False`	`domain` の外のデータを切り捨てるか
`orientation`	x: `"bottom"` `"top"`, y: `"left"` `"right"`	`"bottom"` / `"left"`	軸を置く側
`x_axis_id` / `y_axis_id`	文字列または数値	`0`	軸が複数あるとき系列と対応付ける名前
`label`	文字列、数値、dict	-	軸名。dict には `value` `position` `offset` `angle`
`interval`	`"preserveEnd"` `"preserveStart"` `"preserveStartEnd"` `"equidistantPreserveStart"`、数値	`"preserveEnd"`	重なる目盛り文字をどう間引くか。`0` ならすべて表示
`tick_count`	数値	`5`	数値軸の目盛りの数
`ticks`	リスト	-	目盛りの値を直接指定
`tick_formatter`	JS 関数式の文字列	-	目盛り文字の見た目を変える
`tick` · `tick_line` · `axis_line`	`True` / `False`	`True`	目盛り文字、目盛り線、軸線を表示
`tick_size` · `min_tick_gap`	数値	`6` · `5`	目盛り線の長さ、目盛り文字どうしの最小間隔
`mirror` · `reversed` · `hide`	`True` / `False`	`False`	文字を内側に、順序を逆に、軸を隠す
`unit` · `name`	文字列	-	ツールチップに一緒に表示する単位と名前
`stroke`	色	`rx.color("gray", 9)`	軸線と目盛りの色
`angle` · `padding` (x軸)	数値 · dict	`0` · `{"left": 0, "right": 0}`	目盛り文字の回転、両端の余白
`on_click` など	イベント	-	目盛りをクリックしたりマウスを乗せたりしたとき（引数なし）

複数の軸

単位の違う2つの系列には、軸を1つずつ別に与えます。軸に y_axis_id を付け、系列にも同じ y_axis_id を与えると対応付けられます。2つ目の軸は orientation="right" で右側に置きます。

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8", y_axis_id="left"),
    rx.recharts.area(data_key="pv", stroke="#82ca9d", fill="#82ca9d", y_axis_id="right", type_="monotone"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(data_key="uv", y_axis_id="left"),
    rx.recharts.y_axis(data_key="pv", y_axis_id="right", orientation="right"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=axis_data,
    width="100%",
    height=300,
)

目盛りを整える

axis_line=False と tick_line=False は軸線と目盛り線を消し、文字だけを残します。tick_size は軸と文字の間を広げ、interval="preserveStartEnd" は文字が重なって一部を省くときでも最初と最後は残します。プロパティにない文字サイズは、custom_attrs で Recharts にそのまま渡します。

tick_formatter は目盛り文字を変える JavaScript の関数式です。下では 4000 を 4k と表示します。この値は文字列でしか書けず、State の値は渡せません。

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",
        axis_line=False,
        tick_line=False,
        tick_size=10,
        interval="preserveStartEnd",
        custom_attrs={"fontSize": "12px"},
    ),
    rx.recharts.y_axis(
        axis_line=False,
        tick_line=False,
        tick_size=10,
        interval="preserveStartEnd",
        tick_formatter="(value) => value / 1000 + 'k'",
        custom_attrs={"fontSize": "12px"},
    ),
    data=axis_data,
    width="100%",
    height=300,
    margin={"left": 20, "right": 20, "top": 25},
)

軸名の位置

label の dict の position は14種類の値を受け取り、offset でその位置からもう少し押し出したり引き寄せたりします。dict の中の値も State の値で変えられます。

プロパティを変えてみる

x_position

x_offset

y_position

y_offset

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv"),
    rx.recharts.x_axis(data_key="name", label={"value": "Pages", "position": "bottom", "offset": 0}),
    rx.recharts.y_axis(label={"value": "Views", "angle": -90, "position": "left", "offset": 0}),
    data=axis_data,
    width="100%",
    height=300,
    margin={"bottom": 40, "left": 40, "right": 40},
)

inside で始まる値は軸の内側に、top・bottom・left・right は軸の外側に名前を置きます。

数値軸の範囲

domain は数値軸の最小・最大を決めます。既定では、データが範囲を超えると軸が自動で広がります（左）。allow_data_overflow=True を指定すると範囲を守り、はみ出た部分を切り取ります（右、9800 の Page C）。

rx.flex(
    rx.recharts.line_chart(
        rx.recharts.line(data_key="pv"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(domain=[0, 6000], tick_count=7),
        data=axis_data,
        width=300,
        height=220,
    ),
    rx.recharts.line_chart(
        rx.recharts.line(data_key="pv"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(domain=[0, 6000], tick_count=7, allow_data_overflow=True),
        data=axis_data,
        width=300,
        height=220,
    ),
    spacing="4",
    wrap="wrap",
)

ZAxis：点の大きさ

散布図の rx.recharts.z_axis は画面には描かれず、点の大きさを決めます。data_key の値が小さいほど range の前のほう（小さな面積）、大きいほど後ろのほう（大きな面積）になります。ツールチップには name と unit が一緒に表示されます。

axis_points = [
    {"x": 10, "y": 30, "z": 200},
    {"x": 25, "y": 45, "z": 260},
    {"x": 40, "y": 20, "z": 400},
    {"x": 55, "y": 60, "z": 280},
    {"x": 70, "y": 35, "z": 500},
    {"x": 85, "y": 50, "z": 120},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=axis_points, name="Shops"),
    rx.recharts.x_axis(data_key="x", type_="number", name="Price", unit="$"),
    rx.recharts.y_axis(data_key="y", type_="number", name="Sales"),
    rx.recharts.z_axis(data_key="z", range=[60, 400], name="Stock"),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

注文書を仕上げる

訪問数は棒と左の軸、売上は線と右の軸に分けます。2つの軸に名前を付け、凡例は上に移して軸名と重ならないようにします。

axis_month_data = [
    {"month": "Jan", "visits": 820, "sales": 12},
    {"month": "Feb", "visits": 940, "sales": 15},
    {"month": "Mar", "visits": 1310, "sales": 21},
    {"month": "Apr", "visits": 1180, "sales": 26},
    {"month": "May", "visits": 1560, "sales": 24},
    {"month": "Jun", "visits": 1720, "sales": 31},
]


rx.recharts.composed_chart(
    rx.recharts.bar(data_key="visits", y_axis_id="visits", name="Visits", fill=rx.color("accent", 8)),
    rx.recharts.line(data_key="sales", y_axis_id="sales", name="Sales", stroke=rx.color("orange", 9)),
    rx.recharts.x_axis(data_key="month", label={"value": "Month", "position": "insideBottom", "offset": -10}),
    rx.recharts.y_axis(y_axis_id="visits", label={"value": "Visits", "angle": -90, "position": "insideLeft"}),
    rx.recharts.y_axis(y_axis_id="sales", orientation="right", unit="k", label={"value": "Sales", "angle": 90, "position": "insideRight"}),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(vertical_align="top"),
    data=axis_month_data,
    width="100%",
    height=320,
    margin={"bottom": 20},
)

工房ノート

x_axis・y_axis をチャートの子に入れ、data_key で目盛りに使う列を選ぶ。
label は dict で：value・position・offset・angle。チャートの margin で場所を空ける。
軸が2つなら y_axis_id で系列と対応付け、2つ目の軸は orientation="right"。
domain で範囲を決め、allow_data_overflow=True ならはみ出た部分を切り取る。
tick_formatter は JS 関数の文字列、z_axis は散布図の点の大きさ（range）。

← 前へ

チャート · Error Bar

チャートの部品 · Cartesian Grid

新しい授業・講座のお知らせを受け取る

この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。

質問と回答

この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。

ReflexKR

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

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

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

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

Built with Reflex