Next.js環境のHighchartsでシンプルな円グラフを作った

April 22, 2022

#Next.js

#Highcharts

#pie

作りたいもの

作りたいグラフはこちら pieチャート

Highchartsは多機能なので制限しないと色んな情報が表示されます。今回はシンプルにデータを表示させる設定を行いたいと思います。

セットアップ

$ yarn add highcharts highcharts-react-official

ディレクトリ構成

src/
  ├ components
  │  └ PieChart.tsx
  └ pages/
     └ pieChart.tsx

ソースコード

</>src/pages/lineChart.tsx

import PieChart from "../components/PieChart";

const Chart: React.FC = () => {
  const sampleRate = 75;

  return (
    <>
      <PieChart rate={sampleRate} />
    </>
  );
};

export default Chart;

</>src/components/PieChart.tsx

import * as Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

type Props = { rate: number };

export const getOperationRateFillerPieChartOptions = (rate: number) => {
  return {
    chart: {
      type: "pie",
      backgroundColor: "transparent",
      width: "330",
      height: "330",
    },
    title: {
      verticalAlign: "center",
      Align: "center",
      y: 170,
      x: 0,
      style: {
        fontSize: "45px"
      },
      text : `<b>${Math.round(rate).toLocaleString()}%</b>`
    },
    tooltip: {
      enabled: false
    },
    plotOptions: {
      pie: {
        dataLabels: {
          enabled: false
        }
      }
    },
    series: [{
      name: "",
      type: "pie",
      innerSize: "65%",
      data: [
        {
          y: Math.round(rate * 10) / 10,
          name: "",
          color: "#00ACC1"
        },
        {
          y: Math.round((100 - rate) * 10) /10,
          name: "",
          color: "#DEE0E3"
        }
      ]
    }],
    credits: false
  };
};

const PieChart: React.FC<Props> = ({ rate }: Props) => {
  return (
    <>
      <HighchartsReact highcharts={Highcharts} options={getOperationRateFillerPieChartOptions(rate)} />
    </>
  );
};

export default PieChart;

プロパティの解説

細かい設定は公式ホームページを参照してください。

=> https://www.highcharts.com/

chart

円グラフにするためにtypeを"pie"にする必要があります。

backgroundColorを"transparent"にするとチャートの背景が塗りつぶされず透過するようになります。

width, heightでチャートの大きさを調整します。

title

スクショでいう真ん中の文字などはここで設定します。

tooltip

hoverするとデータが表示されますが、falseにすると非表示にできます。

plotOptions

pie.dataLabels.enabledをfalseにするとヒゲ(デフォルトだとデータの種類に対して線が追加されてしまいます)

series

一つのデータだけ表示したいためdataに二つのレコードを設定しています。

片方を(100 - rate)にすることで対象データ以外は色を変えて灰色にしています。

innerSizeを変更することで内側の円の大きさを変えられます。

← Back to home