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

チャート

Bar Chart

rx.recharts.bar_chartrx.recharts.barrx.recharts.cell

公式ドキュメント

工房の注文書

店舗ごとのコーヒーと紅茶の販売数を並べて、どの店舗が何をよく売っているのか比べられるようにしてください。

rx.recharts.bar_chartは、項目ごとに棒を立てて大きさを比べるチャートです。店舗別の売上やカテゴリ別の件数のように、互いに独立した項目を比べるとき、まず最初に選ぶチャートです。チャートの器にdataを渡し、描く系列ごとにrx.recharts.bar(data_key=…)を1つずつ入れます。

このページの例はほとんど下のbarchart_dataを使います。

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_chart(
    rx.recharts.bar(data_key="coffee", fill=rx.color("accent", 8)),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    data=barchart_data,
    width="100%",
    height=250,
)

プロパティを変えてみる

barを2つ入れると、1つの項目の中に棒が並んで立ちます。項目どうしの間隔（bar_category_gap）、同じ項目内の棒どうしの間隔（bar_gap）、棒の後ろの灰色の背景（background）を変えてみてください。

プロパティを変えてみる

color

bar_category_gap

bar_gap

background

rx.recharts.bar_chart(
    rx.recharts.bar(
        data_key="coffee",
        fill=rx.color("indigo", 8),
        background=False,
    ),
    rx.recharts.bar(
        data_key="tea",
        fill=rx.color("teal", 8),
        background=False,
    ),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    data=barchart_data,
    bar_category_gap="10%",
    bar_gap="5%",
    width="100%",
    height=250,
)

間隔はパーセント文字列かピクセルの数値で指定します。backgroundをオンにすると、棒が入る場所全体が淡く塗られます。

プロパティ	値	既定値	用途
`bar_chart(data=)`	dictのリスト	なし	チャート全体で使うデータ
`bar_chart(layout=)`	`"horizontal"` `"vertical"`	`"horizontal"`	縦棒か横棒か
`bar_chart(bar_category_gap=)`	パーセント・数値	`"10%"`	項目と項目の間隔
`bar_chart(bar_gap=)`	パーセント・数値	`4`	同じ項目内の棒どうしの間隔
`bar_chart(bar_size=, max_bar_size=)`	数値	自動	すべての棒の太さ、太さの上限
`bar_chart(stack_offset=)`	`"none"` `"expand"` `"wiggle"` `"silhouette"`	`"none"`	積み上げた棒の基準の計算方法
`bar_chart(reverse_stack_order=)`	`True` / `False`	`False`	積み上げる順番を逆にする
`bar_chart(sync_id=, margin=)`	文字列 / dict	なし	他のチャートとの連動、周りの余白
`bar(data_key=)`	文字列	なし	描く値のキー。値が`[低, 高]`なら範囲の棒
`bar(fill=, stroke=)`	色	accent 9 / なし	棒の色と枠線の色
`bar(stack_id=)`	文字列	なし	同じ値どうしを上に積み上げる
`bar(radius=)`	数値または`[左上, 右上, 右下, 左下]`	`0`	角の丸み
`bar(background=)`	`True` / `False`	`False`	棒の場所の背景
`bar(min_point_size=)`	数値	なし	0に近い値でも最低この大きさは見えるようにする
`bar(name=, unit=, label=)`	文字列 / bool		ツールチップ・凡例の名前、単位、棒の上の数値
`on_click` `on_mouse_enter` …	イベント		チャート、`bar`、`cell`のすべてが受け取る

積み上げ棒と100%棒

stack_idが同じbarは、1本の棒の上に順に積み上がります。棒全体の高さが合計になります。チャートにstack_offset="expand"を指定すると、すべての棒の高さがそろい、各部分の比率だけが残ります。

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.flex(
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="coffee", stack_id="1", fill=rx.color("accent", 8)),
        rx.recharts.bar(data_key="tea", stack_id="1", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="store"),
        rx.recharts.y_axis(),
        rx.recharts.legend(),
        data=barchart_data,
        width="100%",
        height=250,
    ),
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="coffee", stack_id="1", fill=rx.color("accent", 8)),
        rx.recharts.bar(data_key="tea", stack_id="1", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="store"),
        rx.recharts.y_axis(),
        rx.recharts.legend(),
        data=barchart_data,
        stack_offset="expand",
        width="100%",
        height=250,
    ),
    direction="column",
    spacing="4",
    width="100%",
)

範囲の棒

data_keyが指す値が数値1つではなく[低, 高]の2つなら、棒は0からではなく低い値から始まり、高い値で終わります。1日の最低・最高気温のように、範囲を見せたいときに使います。

rx.recharts.bar_chart(
    rx.recharts.bar(
        data_key="temperature",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 7),
    ),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=[
        {"day": "Mon", "temperature": [-1, 10]},
        {"day": "Tue", "temperature": [2, 15]},
        {"day": "Wed", "temperature": [3, 12]},
        {"day": "Thu", "temperature": [4, 12]},
        {"day": "Fri", "temperature": [12, 16]},
        {"day": "Sat", "temperature": [5, 16]},
        {"day": "Sun", "temperature": [0, 8]},
    ],
    width="100%",
    height=250,
)

棒の太さと間隔

bar_sizeはすべての棒の太さをピクセルで決め、max_bar_sizeは太さの上限を決めます。下の例はbar_size=100ですが、max_bar_size=24が優先されるので、棒は24ピクセルを超えません。項目が少ないときに棒が太くなりすぎるのを防ぐのに便利です。

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_chart(
    rx.recharts.bar(data_key="coffee", fill=rx.color("accent", 8)),
    rx.recharts.bar(data_key="tea", fill=rx.color("teal", 8)),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    data=barchart_data,
    bar_category_gap="15%",
    bar_gap=6,
    bar_size=100,
    max_bar_size=24,
    width="100%",
    height=250,
)

丸い角とグラデーション

radiusに数値を1つ渡すと4つの角がすべて丸くなり、[8, 8, 0, 0]のようにリストを渡すと、左上・右上・右下・左下の順に個別に決められます。上側だけを丸くすると、床に立っている棒のように見えます。塗りの色には、エリアチャートと同じくrx.el.svg.defsのグラデーションをurl(#id)で使えます。

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_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.9),
            rx.el.svg.stop(offset="95%", stop_color=rx.color("accent", 9), stop_opacity=0.2),
            id="barchart_gradient",
            x1=0,
            y1=0,
            x2=0,
            y2=1,
        ),
    ),
    rx.recharts.bar(
        data_key="coffee",
        fill=rx.color("teal", 8),
        radius=8,
    ),
    rx.recharts.bar(
        data_key="tea",
        fill="url(#barchart_gradient)",
        radius=[8, 8, 0, 0],
    ),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=barchart_data,
    width="100%",
    height=250,
)

横棒 (layout)

layout="vertical"を指定すると、棒が左から右へ伸びる横棒グラフになります。x軸を数値（type_="number"）、y軸を項目（type_="category"）に切り替えます。項目名が長いときに読みやすくなります。

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_chart(
    rx.recharts.bar(
        data_key="coffee",
        stroke=rx.color("accent", 8),
        fill=rx.color("accent", 4),
    ),
    rx.recharts.x_axis(type_="number"),
    rx.recharts.y_axis(data_key="store", type_="category"),
    data=barchart_data,
    layout="vertical",
    margin={"top": 20, "right": 20, "left": 20, "bottom": 20},
    width="100%",
    height=280,
)

Stateとクリック

dataにStateの値をつなぐと、値が変わったときに棒がアニメーションで伸び縮みします。下のチャートは、どこを押しても（bar_chartのon_click）数値が新しく決まります。

import random
from typing import Any


class BarChartLiveState(rx.State):
    data: list[dict[str, Any]] = [
        {"store": "North", "coffee": 4000, "tea": 2400},
        {"store": "South", "coffee": 3000, "tea": 1398},
        {"store": "East", "coffee": 2000, "tea": 5800},
        {"store": "West", "coffee": 2780, "tea": 3908},
    ]

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


rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.bar(data_key="coffee", fill=rx.color("accent", 8)),
    rx.recharts.bar(data_key="tea", fill=rx.color("teal", 8)),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    rx.recharts.legend(),
    on_click=BarChartLiveState.shuffle,
    data=BarChartLiveState.data,
    width="100%",
    height=280,
)

棒の1本1本に別々の動作を付けるにはrx.recharts.cellを使います。barの中でrx.foreachを使ってデータの数だけcellを作ると、それぞれのcellが同じ順番の棒を受け持ちます。そのcellのon_clickに項目の名前を渡して、押した棒だけを残すドリルダウンを作ります。同じ棒をもう一度押すと全体に戻ります。

foreachの関数は(item, index)を受け取り、cellを1つ返します。
クリックハンドラーは、画面を作る時点でその項目の値と結び付けられます（toggle(item["name"].to(str))）。
rx.condで、選んだ棒だけを別の色で塗ります。
チャートのdataそのものが計算変数（rows）なので、選ぶとチャートがその項目だけを描き直します。

同じ方法はパイチャートでも使えます（pieの中にcellを入れます）。

barchart_genres = [
    {"name": "Fiction", "count": 42},
    {"name": "History", "count": 28},
    {"name": "Science", "count": 35},
    {"name": "Biography", "count": 17},
    {"name": "Fantasy", "count": 24},
]

barchart_colors = ["#6366F1", "#8B5CF6", "#A855F7", "#D946EF", "#EC4899"]


class BarChartDrillState(rx.State):
    picked: str = ""

    @rx.var
    def rows(self) -> list[dict[str, str | int]]:
        if self.picked:
            return [g for g in barchart_genres if g["name"] == self.picked]
        return barchart_genres

    @rx.event
    def toggle(self, name: str):
        self.picked = "" if self.picked == name else name


rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.x_axis(data_key="name", tick_line=False, axis_line=False),
    rx.recharts.y_axis(allow_decimals=False, axis_line=False, tick_line=False),
    rx.recharts.bar(
        rx.foreach(
            BarChartDrillState.rows,
            lambda item, index: rx.recharts.cell(
                on_click=BarChartDrillState.toggle(item["name"].to(str)),
                custom_attrs={"cursor": "pointer"},
                fill=rx.cond(
                    BarChartDrillState.picked == item["name"],
                    "#1D4ED8",
                    rx.Var.create(barchart_colors)[index % 5],
                ),
            ),
        ),
        data_key="count",
        radius=[4, 4, 0, 0],
    ),
    rx.recharts.graphing_tooltip(),
    data=BarChartDrillState.rows,
    width="100%",
    height=280,
)

注文書を仕上げる

店舗ごとにコーヒーと紅茶の棒を並べて立て、上側だけを丸く整えました。max_bar_sizeで棒が太くなりすぎないようにし、ツールチップと凡例で値と名前を読めるようにしています。

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.bar(data_key="coffee", name="Coffee", fill=rx.color("accent", 8), radius=[4, 4, 0, 0]),
    rx.recharts.bar(data_key="tea", name="Tea", fill=rx.color("teal", 8), radius=[4, 4, 0, 0]),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=barchart_data,
    bar_gap=2,
    max_bar_size=32,
    width="100%",
    height=300,
)

工房ノート

bar_chart(data=…)の中に系列ごとにbar(data_key=…)を入れると並び、stack_idをそろえると積み上がる。
stack_offset="expand"は100%棒、data_keyの値が[低, 高]なら範囲の棒。
間隔はbar_category_gap・bar_gap、太さはbar_size・max_bar_size、角はradius。
layout="vertical"なら横棒。軸のtype_も一緒に切り替える。
棒ごとに違う色やクリックを付けるには、barの中にforeachでrx.recharts.cellを入れる。

← 前へ

チャート · Area Chart

チャート · Line Chart

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex