複合チャートカード
1つのキャンバスのボリュームとレート - 左軸の丸みのあるバー、独自の右軸線上のライン、それぞれ独自のフォーマット。カテゴリを暗くし、そのバーを薄暗くし、残りの部分を薄暗くし、ライン上のパルスドットをポップし、見出しを交換します。下のタイルはバー全体とラインの平均を保持します。
Sessions · Conversion 3.7%
83,200
+9.4%Sessions · 合計
83,200Conversion · average
3.7%インストール
複合チャートカードはBoardUI Proに含まれています。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
データデータ
同じ行から読み込まれる両方のシリーズ: バーバー そして、 line フィールド、ラベル、オプションのカラー、独自の名前 format - axesは独立しているので、カウントとパーセンテージは互いにフラットな1なしで一緒に座っています。 あなたが通過するときの期間のカプセルはドロップダウンです ranges; データ無しでカードは3つのデモの期間を出荷します。
// One row per category, carrying both series' fields.const data = [ { label: "Jan", sessions: 4200, rate: 2.4 }, { label: "Feb", sessions: 4800, rate: 2.6 }, // …];
<ComboChartCard title="Sessions" data={data} bar={{ key: "sessions", label: "Sessions", format: (n) => n.toLocaleString() }} line={{ key: "rate", label: "Conversion", color: "var(--color-chart-6)", format: (n) => `${n}%`, // the right axis keeps its own formatting }} delta={0.094} ranges={[ // period dropdown { id: "year", label: "This year", data: thisYear, delta: 0.094 }, { id: "prev", label: "Last year", data: lastYear, delta: -0.028 }, ]} tiles // bar total + line average below the chart/>