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

はじめに

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

この記事では、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" }]}
    />
  );
}

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" }]}
    />
  );
}

この方法では、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>
  );
}

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

まとめ

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

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

関連記事

参考

• BarChart