デジタルプロダクトのUIデザインではチャートを扱う際に、チャート要素とUI要素がエリア内に同居することがあります。チャート要素はデータビジュアライゼーション用に設定しているカラートークン、UI要素は通常のカラートークンを使用してください。

データビジュアライゼーション用のカラーパレットは、単色相と複数色相の2つを用意しています。目的や扱うデータの種類によって使い分けてください。Serendie Design Systemの各カラーテーマとの共存やプロダクト画面をシンプルに保つために、複数色相を使用しないと表現できないケース以外では、基本的に単色相の使用を推奨します。

単色相を使用する場合

同じカテゴリー、分析軸（ディメンション）、指標（メトリクス）、連続する数を表す場合は、同一の色を使用してください。明度はカラーパレットの01か06から、連続した数字を使ってください。

単色相の中の１つの明度で表せるものは、なるべくchart.mark.primary.05のみ使用するようにしてください。（例１参照）

複数色相を使用する場合

異なるカテゴリー、分析軸（ディメンション）、指標（メトリクス）を表す場合は、異なる色相を使用してください。

表す値が違う複数のグラフ種類を組み合わせる場合は、色相環の中での組み合わせを使用してください。（例２、複数のグラフ種類を組み合わせる場合を参照）

マーク間のマージン

複数／単色の色相両方において、マークの連続するカラートークン間 (例: mark.primary.01とmark.primary.02) には十分なコントラスト比がありません。この場合はマークに白線やマージンを入れて区別できるようにしてください。

マーク上のテキスト

マーク上にテキストを置く際は、以下の組み合わせを使用してください。 マークの面積が小さすぎて置けない場合は、Tooltipを使用してホバー時にテキストが表示されるようにしてください。

色だけに頼らない識別

グラフの種類を識別させる際に色だけで差を出すことは避け、シェイプ、ライン、パターン、テキストなどの補助要素を使用するようにしてください。