メニュー

Barコンポーネント デモ（JSON入力対応）

共通部品の Bar コンポーネントに、任意のデータ(JSON)と軸設定を渡して棒グラフを表示します。 幅・高さは上部のコントローラーで変更できます。

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

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

変数名
値

データ (JSON)

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

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

<div className="chartContainer">
  <Bar
    data={/* JSON.parse(...) したデータ */}
    targetPeriod="過去10年"
    axisConfig={{"xKey":"time","yKey":"value","categoryLabel":"category","xLabel":"","yLabel":"","unit":"人"}}
  />
</div>

変数名

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