Chart

Chart コンポーネントは、チャートを表示するためのコンポーネントです。現状では折れ線グラフのみをサポートしており、複数のデータセットを表示できます。

基本的な使い方

<Chart
  title="年度別売上と利益"
  xAxis="year"
  dataSetColors={{
    sales: "blue",
    profit: "green",
  }}
  dataSet={[
    { year: "2020", sales: 1000, profit: 200 },
    { year: "2021", sales: 1500, profit: 300 },
    { year: "2022", sales: 1300, profit: 250 },
    { year: "2023", sales: 1700, profit: 350 },
  ]}
/>

詳細なインターフェース

名前	説明	デフォルト値
title	チャートのタイトルを指定します。	なし
type	チャートの種類を指定します。現在は'line'のみをサポートしています。	'line'
xAxis	データセット内でX軸に対応するキーを指定します。必須項目です。	なし
xAxisTitle	X軸のタイトルを指定します。	なし
yAxisTitle	Y軸のタイトルを指定します。	なし
dataSetColors	データセットのカラーを指定します。キーはデータセット内のキー、値は'ChartColor'型で指定します。 'red', 'blue', 'green', 'yellow'から選択できます。	なし
dataSet	データセットを指定します。必須項目です。	なし

Stat Form