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

チャート

Area Chart

rx.recharts.area_chartrx.recharts.area

公式ドキュメント

工房の注文書

月ごとのWeb・アプリの訪問者数を積み上げて、全体の流れとそれぞれの割合がひと目でわかるグラフを作ってください。

rx.recharts.area_chartは、線の下を色で塗りつぶしたエリアチャートです。時間とともに変わる量や、複数の値を合わせた全体の大きさを一緒に見せたいときに使います。チャートの器（area_chart）にデータを渡し、その中に描く系列（area）と軸を子として入れます。

データはdictのリストです。各dictがx軸の1マスにあたり、data_keyはそのdictからどの値を描くかを選ぶキーです。このページの例はすべて下のareachart_dataを使います。

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(data_key="web"),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    data=areachart_data,
    width="100%",
    height=250,
)

チャートのwidthとheightが受け付けるのは、数値（ピクセル）か"100%"のようなパーセント文字列だけです。"20em"のようなCSS単位は、チャートを包むボックスのほうに指定します。軸（x_axis、y_axis）、グリッド、ツールチップ、凡例はチャート部品のページで詳しく扱うので、ここでは必要な分だけ使います。

プロパティを変えてみる

2つのエリアをstack_id="1"で積み上げてあります。曲線の形、色、線の太さ、点、積み上げ方を変えてみてください。データは上のareachart_dataです。

プロパティを変えてみる

curve

color

stroke_width

dot

stack_offset

rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        type_="monotone",
        stroke=rx.color("indigo", 9),
        fill=rx.color("indigo", 5),
        stroke_width=1,
        dot=False,
        stack_id="1",
    ),
    rx.recharts.area(
        data_key="app",
        type_="monotone",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 5),
        stroke_width=1,
        dot=False,
        stack_id="1",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=areachart_data,
    stack_offset="none",
    width="100%",
    height=250,
)

type_は点と点をつなぐ方法です。stack_offsetをexpandにすると各月の合計が100%になり、比率だけが見えます。

プロパティ	値	既定値	用途
`area_chart(data=)`	dictのリスト	なし	チャート全体で使うデータ
`area_chart(width=, height=)`	数値または`"100%"`	`"100%"`	チャートのサイズ。高さは数値で指定するのが安全
`area_chart(layout=)`	`"horizontal"` `"vertical"`	`"horizontal"`	横向きの流れか縦向きの流れか
`area_chart(stack_offset=)`	`"none"` `"expand"` `"wiggle"` `"silhouette"`	なし	積み上げたエリアの基準線の計算方法
`area_chart(sync_id=)`	文字列	なし	同じ値のチャート同士でツールチップ・ブラシを連動させる
`area_chart(margin=)`	`{"top": 5, ...}`	なし	チャート周りの余白
`area_chart(base_value=)`	数値、`"dataMin"` `"dataMax"` `"auto"`	`"auto"`	エリアが始まる底の値
`area(data_key=)`	文字列	なし	描く値のキー
`area(type_=)`	`"monotone"` `"linear"` `"natural"` `"step"` …	`"monotone"`	曲線の補間方法
`area(stroke=, fill=)`	色	accent 9 / accent 5	線の色と塗りの色
`area(stroke_width=)`	数値	`1`	線の太さ
`area(dot=, active_dot=)`	`True` / `False` / dict	`False` / accent の点	点の表示と、マウスを乗せたときの点
`area(stack_id=)`	文字列	なし	同じ値同士を上に積み上げる
`area(name=, unit=)`	文字列	`data_key`	ツールチップ・凡例に表示する名前と単位
`area(connect_nulls=)`	`True` / `False`	`False`	空の値（`None`）を飛ばしてつなげて描く
`area(x_axis_id=, y_axis_id=)`	文字列・数値	`0`	どの軸に付けるか
`on_click` `on_mouse_enter` …	イベント		チャートとエリアの両方が受け取る。`area`には`on_animation_start`・`on_animation_end`もある

積み上げエリア (stack_id)

stack_idが同じareaは、下から順に積み上がります。いちばん上の境界線が合計になるので、全体の大きさと各部分を同時に読み取れます。stack_offsetは積み上げの基準を決めるもので、ふつうは"none"、比率だけを見たいときは"expand"を使います。

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 6),
        stack_id="1",
    ),
    rx.recharts.area(
        data_key="app",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 6),
        stack_id="1",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.legend(),
    data=areachart_data,
    stack_offset="none",
    margin={"top": 5, "right": 5, "bottom": 5, "left": 5},
    width="100%",
    height=280,
)

グラデーションで塗る

エリアを上は濃く、下は透明に塗ると、線がぐっと見やすくなります。チャートの中にrx.el.svg.defsでSVGグラデーションを定義し、fill="url(#ID)"で参照します。グラデーションのidはページ内で重ならないように付けます。

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.el.svg.defs(
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="5%", stop_color=rx.color("accent", 9), stop_opacity=0.8),
            rx.el.svg.stop(offset="95%", stop_color=rx.color("accent", 9), stop_opacity=0),
            id="areachart_gradient",
            x1=0,
            x2=0,
            y1=0,
            y2=1,
        ),
    ),
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 9),
        fill="url(#areachart_gradient)",
        type_="natural",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=areachart_data,
    width="100%",
    height=280,
)

軸を複数使う

大きさがまったく違う2つの値を1つのチャートに描くときは、軸を2本置きます。軸にy_axis_idで名前を付け、各areaに同じy_axis_idを渡してつなげます。x軸もx_axis_idで同じようにできます。ただし目盛りが2つあると読む人が混乱しやすいので、単位が本当に違うときだけ使いましょう。

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 5),
        y_axis_id="left",
    ),
    rx.recharts.area(
        data_key="app",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 5),
        y_axis_id="right",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(y_axis_id="left"),
    rx.recharts.y_axis(y_axis_id="right", orientation="right"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=areachart_data,
    width="100%",
    height=280,
)

縦向きにする (layout)

layout="vertical"にすると、エリアが上から下へ流れます。このとき軸の役割も入れ替わり、x軸が数値（type_="number"）、y軸が項目（type_="category"）になります。文字が切れないよう、marginを四方すべてに指定しておくとよいでしょう。

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 8),
        fill=rx.color("accent", 3),
    ),
    rx.recharts.x_axis(type_="number"),
    rx.recharts.y_axis(data_key="month", type_="category"),
    data=areachart_data,
    layout="vertical",
    margin={"top": 20, "right": 20, "bottom": 20, "left": 20},
    width="100%",
    height=300,
)

チャートを連動させる (sync_id)

sync_idが同じチャート同士は、ツールチップの位置とブラシの範囲を共有します。上のチャートにマウスを乗せると下のチャートにも同じ月のツールチップが表示され、下のブラシで範囲を狭めると上のチャートもそれに合わせて狭まります。棒・折れ線・複合チャートとも連動できます。

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.vstack(
    rx.recharts.area_chart(
        rx.recharts.area(data_key="web", stroke=rx.color("accent", 9), fill=rx.color("accent", 5)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        rx.recharts.graphing_tooltip(),
        data=areachart_data,
        sync_id="areachart_sync",
        width="100%",
        height=180,
    ),
    rx.recharts.area_chart(
        rx.recharts.area(data_key="app", stroke=rx.color("teal", 9), fill=rx.color("teal", 5)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        rx.recharts.graphing_tooltip(),
        rx.recharts.brush(data_key="month", height=24),
        data=areachart_data,
        sync_id="areachart_sync",
        width="100%",
        height=210,
    ),
    width="100%",
)

Stateで動くチャート

dataにStateの値を渡すと、値が変わるたびにチャートがアニメーション付きで描き直されます。ここではボタンかエリアを押すと数値が変わり、セレクトボックスでtype_もStateから切り替えます。リストを丸ごと新しく代入すれば、変更が確実に伝わります。

import random
from typing import Any


class AreaChartLiveState(rx.State):
    data: list[dict[str, Any]] = [
        {"month": "Jan", "web": 4000, "app": 2400},
        {"month": "Feb", "web": 3000, "app": 1398},
        {"month": "Mar", "web": 2000, "app": 5800},
        {"month": "Apr", "web": 2780, "app": 3908},
        {"month": "May", "web": 1890, "app": 4800},
        {"month": "Jun", "web": 2390, "app": 3800},
    ]
    curve: str = "monotone"

    @rx.event
    def shuffle(self):
        self.data = [
            {**row, "web": random.randint(500, 6000), "app": random.randint(500, 6000)}
            for row in self.data
        ]

    @rx.event
    def set_curve(self, value: str):
        self.curve = value


rx.vstack(
    rx.hstack(
        rx.button("Shuffle", on_click=AreaChartLiveState.shuffle),
        rx.select(
            ["monotone", "linear", "natural", "step", "basis"],
            value=AreaChartLiveState.curve,
            on_change=AreaChartLiveState.set_curve,
        ),
    ),
    rx.recharts.area_chart(
        rx.recharts.area(
            data_key="web",
            type_=AreaChartLiveState.curve,
            on_click=AreaChartLiveState.shuffle,
        ),
        rx.recharts.area(
            data_key="app",
            type_=AreaChartLiveState.curve,
            stroke=rx.color("teal", 9),
            fill=rx.color("teal", 5),
            on_click=AreaChartLiveState.shuffle,
        ),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
        rx.recharts.legend(),
        data=AreaChartLiveState.data,
        width="100%",
        height=300,
    ),
    width="100%",
)

注文書を仕上げる

2つのエリアを同じstack_idで積み上げ、グラデーションで下のほうを淡く塗りました。nameで凡例とツールチップに表示する名前を付け、横のグリッド線だけを残して落ち着いた見た目にしています。

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.el.svg.defs(
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="5%", stop_color=rx.color("accent", 9), stop_opacity=0.7),
            rx.el.svg.stop(offset="95%", stop_color=rx.color("accent", 9), stop_opacity=0.1),
            id="areachart_order_web",
            x1=0, x2=0, y1=0, y2=1,
        ),
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="5%", stop_color=rx.color("teal", 9), stop_opacity=0.7),
            rx.el.svg.stop(offset="95%", stop_color=rx.color("teal", 9), stop_opacity=0.1),
            id="areachart_order_app",
            x1=0, x2=0, y1=0, y2=1,
        ),
    ),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.area(
        data_key="web",
        name="Web",
        stroke=rx.color("accent", 9),
        stroke_width=2,
        fill="url(#areachart_order_web)",
        stack_id="visits",
    ),
    rx.recharts.area(
        data_key="app",
        name="App",
        stroke=rx.color("teal", 9),
        stroke_width=2,
        fill="url(#areachart_order_app)",
        stack_id="visits",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=areachart_data,
    width="100%",
    height=300,
)

工房ノート

area_chart(data=リスト)の中に、area(data_key=…)とx_axis・y_axisを子として入れる。
width・heightは数値かパーセント文字列だけ。CSS単位は外側のボックスに指定する。
stack_idが同じなら積み上がり、stack_offset="expand"なら100%の比率チャートになる。
グラデーションはrx.el.svg.defsで定義し、fill="url(#id)"で使う。
sync_idでチャート同士のツールチップを連動させ、dataにStateの値を渡すと生きて動く。

← 前へ

表とデータグリッド · Data Editor

チャート · Bar Chart

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex