【MantineCharts】BarChart で上から下方向の棒グラフを実装する

はじめに

React 向けコンポーネントライブラリである Mantine に含まれるチャート（グラフ）機能の MantineCharts で上から下方向の棒グラフを実装する方法を記載します。

一般的な棒グラフは下から上方向に表示されます。また、そうしたグラフでは、売り上げなど数字が大きいほどよいという判断をされるケースが多いです。一方、数字が大きいとマイナスの判断をされる数字もあります。そういった場合に上から下方向のグラフを利用できると思います。

開発環境

開発環境は以下の通りです。

• Windows 11
• Next.js 14.2.4
• React 18.3.1
• TypeScript 5.5.2
• @mantine/core 7.13.4
• @mantine/hooks 7.13.4
• @mantine/charts 7.13.4
• Recharts 2.13.2

実装

yAxisProps に reversed: true を渡すと上から下方向の棒グラフになります。

page.tsx

import { BarChart } from "@mantine/charts";

const data = [
  { month: "January", gap: 20 },
  { month: "February", gap: 90 },
  { month: "March", gap: 40 },
  { month: "April", gap: 100 },
  { month: "May", gap: 80 },
  { month: "June", gap: 75 },
];

export default function Page() {
  return (
    <BarChart
      h={400}
      data={data}
      dataKey="month"
      series={[{ name: "gap", color: "blue.6" }]}
      yAxisProps={{
        reversed: true,
      }}
    />
  );
}

xAxixiProps に orientation: "top" を渡すと目盛りの位置をチャートの上に表示できます。

https://recharts.org/en-US/api/XAxis#orientation

関連記事

参照

• BarChart
• XAxis
• YAxis