メニュー

グループ化棒グラフ デモ

GroupedBar に time × category × value のデータを渡して、カテゴリ別に並べた棒グラフを表示します。 幅・高さ、色や文字色はコントローラーから変更できます。

プロパティ・コントローラー

カスタムスタイル (CSS変数)

変数名
値

データ (JSON)

呼び出しコード (Next.js)

<style>
  .chartContainer { width: 100%; height: 400px; }
  @media (max-width: 768px) {
    .chartContainer { width: 100%; height: 400px; }
  }
</style>

<div className="chartContainer">
  <GroupedBar
    data={/* time, category, value の配列を JSON.parse(...) したもの */}
    targetPeriod="過去5年"
    axisConfig={{"xKey":"time","yKey":"value","categoryLabel":"category","xLabel":"","yLabel":"","unit":"人"}}
    colors={['#4a90e2', '#82ca9d', '#ffc658']}
  />
</div>

変数名

変数名 / CSS変数内容必須解説
data配列データ●[{"time":"","category":"","value":}] を基本とし、xKey/yKey でキー名を変更可能
targetPeriod対象期間例: 過去5年 / 直近3期 など (getSelectedPeriod を利用)
axisConfig軸設定●xKey, yKey, unit などを指定
styleサイズ / 色など (CSS変数)●(サイズは親要素で指定)CSS変数名【デフォルト値】説明
■色（系列）
--chart-color1【#8884d8】系列1の色
--chart-color2【#82ca9d】系列2の色
--chart-color3【#ffc658】系列3の色
…（以降任意）
■文字／軸
--chart-text-color【#333】ラベル/凡例/軸ラベルなどの文字色
--chart-tick-color【#666】軸目盛りの文字色
--chart-axis-line-color【#999】軸線・ツールチップ枠線色
■ラベル表示
--chart-bar-label-display【block】棒上の値ラベル表示（非表示は none）