Highchartsでドーナツチャートを作成する方法｜innerSizeを使った中央に穴のある円グラフの実装例

Highchartsでドーナツチャート（中央に穴が開いた円グラフ）を作成するには、データを2つの要素を持つ配列の配列形式で渡し、innerSizeパラメータを設定します。これにより、通常の円グラフの中心部分がくり抜かれ、ドーナツ状のデザインになります。

データとinnerSizeの基本設定

まず、各項目を「ラベル名」と「数値」のペアにした配列としてデータを用意し、innerSizeで内側の穴の大きさを指定します。

...
data: [["Audi", 4], ["Benz", 6], ["Jaguar", 9]],
innerSize: '30%',
...

上記の例では、innerSizeに「30%」を設定しているため、チャート全体に対して30%の大きさの穴が中央に開きます。

series設定のサンプルコード

実際のseriesオプションの記述例は以下の通りです。sizeでチャート全体のサイズを、innerSizeで内側の穴の比率をそれぞれ制御できます。

series: [{
    name: 'Cars',
    data: [["Audi", 4], ["Benz", 6], ["Jaquar", 9]],
    size: '50%',
    innerSize: '30%',
    showInLegend: true,
    dataLabels: {
        enabled: false
    }
}]

各パラメータのポイント

• size: ドーナツチャート全体の大きさを指定します（例：「50%」）。
• innerSize: 中央の穴の大きさを指定します。「0%」にすると通常の円グラフになり、値を大きくするほど穴が広がります。
• showInLegend: trueにすると凡例に各項目が表示されます。
• dataLabels.enabled: falseにするとデータラベルが非表示になります。

このようにinnerSizeを追加するだけで、シンプルな円グラフを見やすいドーナツチャートに変えることができます。中央のスペースには合計値などを表示できるため、ダッシュボードなどでも活用されています。