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