【MantineCharts】BarChart で特定の値を目立たせる方法

# はじめに

データ可視化において、特定の値や閾値を強調表示することは、ユーザーにとって重要な情報を迅速に伝える手段となります。MantineCharts の BarChart コンポーネントを使用すると、さまざまな方法で特定の値を目立たせることが可能です。

https://mantine.dev/charts/bar-chart/

この記事では、BarChartで特定の値を強調表示する方法を紹介します。

# 開発環境

* Next.js 15.3.2
* React 19.1.0
* @mantine/charts 7.15.3
* @mantine/core 7.15.3
* recharts 2.15.3
* Node.js 22.13.1
* npm 11.0.0

# 表示するデータ
特定の値を目立たせる方法紹介時に利用するサンプルコードでは、以下のデータを BarChart で表示します。

```data.ts
export const data = [
  { month: "Jan", sales: 600 },
  { month: "Feb", sales: 1100 },
  { month: "Mar", sales: 950 },
  { month: "Apr", sales: 1300 },
  { month: "May", sales: 1000 },
  { month: "Jun", sales: 800 },
];
```

# 1. Reference line（参照線）を追加する
最も簡単な方法は、Reference line を追加することです。`referenceLines` prop を使用して、特定の値に線を引くことができます。

以下のサンプルコードでは、`Jan` に赤色、`Apr` に青色の Reference line を追加しています。

```Page.tsx
import { BarChart } from "@mantine/charts";
import { data } from "./data";

export default function Page() {
  return (
    <BarChart
      h={300}
      data={data}
      dataKey="month"
      referenceLines={[
        {
          x: "Jan",
          color: "red",
          label: "min",
          labelPosition: "top",
        },
        {
          x: "Apr",
          color: "blue",
          label: "max",
          labelPosition: "top",
        },
      ]}
      series={[{ name: "sales", color: "teal" }]}
    />
  );
}

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/d3d1912f-a08c-43e1-a381-4aaf9b6c5ed7.png)



`x` で表示位置を、`color` で線の色を、`label` でラベルを、`labelPosition` でラベルの位置を設定できます。

## 特定のバーの色を変更する
最も直接的な方法として、バー自体の色を変更することもできます。MantineChartsでは、`data`配列内の各データオブジェクトに`color`プロパティを追加することで、個別のバーの色を設定できます。

```Page.tsx
import { BarChart } from "@mantine/charts";
import { data } from "./data";

function addColorToExtremes(data: { month: string; sales: number }[]) {
  if (data.length === 0) return [];

  const { max, min } = data.reduce(
    (acc, item) => {
      if (item.sales > acc.max) acc.max = item.sales;
      if (item.sales < acc.min) acc.min = item.sales;
      return acc;
    },
    { max: data[0].sales, min: data[0].sales },
  );

  return data.map((d) => {
    if (d.sales === max) return { ...d, color: "blue" };
    if (d.sales === min) return { ...d, color: "red" };
    return { ...d };
  });
}

export default function Page() {
  return (
    <BarChart
      h={300}
      data={addColorToExtremes(data)}
      dataKey="month"
      series={[{ name: "sales", color: "teal" }]}
    />
  );
}

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/180fe359-2115-4536-943c-7728234565fb.png)


この方法では、`color`プロパティを条件に応じて設定することで、特定のバーの色を変更できます。なお、`series`で指定した色がデフォルトとして使用されるため、`color`プロパティを設定しないバーは`series`の色になります。

## 3. SVGパターンを使用する

特定のバーにパターンを適用することで、視覚的に目立たせることも可能です。MantineChartsでは、SVGパターンを定義し、`fill`プロパティを使用してバーに適用できます。

以下は、特定のバーに斜線のパターンを適用する例です。

```Page.tsx
import { BarChart } from "@mantine/charts";
import { data } from "./data";

function addColorToExtremes(data: { month: string; sales: number }[]) {
  if (data.length === 0) return [];

  const { max, min } = data.reduce(
    (acc, item) => {
      if (item.sales > acc.max) acc.max = item.sales;
      if (item.sales < acc.min) acc.min = item.sales;
      return acc;
    },
    { max: data[0].sales, min: data[0].sales },
  );

  return data.map((d) => {
    if (d.sales === max) return { ...d, color: "url(#blueStripes)" };
    if (d.sales === min) return { ...d, color: "url(#redStripes)" };
    return { ...d };
  });
}

export default function Page() {
  return (
    <BarChart
      h={300}
      data={addColorToExtremes(data)}
      dataKey="month"
      series={[{ name: "sales", color: "teal" }]}
    >
      <defs>
        <pattern
          id="blueStripes"
          patternUnits="userSpaceOnUse"
          width={6}
          height={6}
          patternTransform="rotate(45)"
        >
          <line x1="0" y="0" x2="0" y2="6" stroke="blue" strokeWidth={2} />
        </pattern>
        <pattern
          id="redStripes"
          patternUnits="userSpaceOnUse"
          width={6}
          height={6}
          patternTransform="rotate(45)"
        >
          <line x1="0" y="0" x2="0" y2="6" stroke="red" strokeWidth={2} />
        </pattern>
      </defs>
    </BarChart>
  );
}

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318188/fa5c0b69-a83d-4281-8c8e-3048bb5279dc.png)


この方法では、`defs` 内にSVGパターンを定義し、`color` プロパティでバーに適用します。これにより、特定のバーにパターンを適用して視覚的に強調できます。

## まとめ

MantineCharts の BarChartコンポーネントを使用すると、さまざまな方法で特定の値を目立たせることができます。Reference line を追加する、バーの色を変更する、SVGパターンを使用するなど、目的に応じて適切な方法を選択してください。

これらの手法を組み合わせることで、より効果的なデータ可視化が可能になります。

# 関連記事

https://qiita.com/Yasushi-Mo/items/8fe248c9b16b60ed249b

https://qiita.com/Yasushi-Mo/items/91fe3a4367af55d759a7

# 参考
* [BarChart](https://mantine.dev/charts/bar-chart/)