小規模な可視化で依存ライブラリーを増やしたくない場合、SVGを直接生成する方法があります。座標変換と系列の意味を分けておくと、折れ線と棒を重ねたグラフも保守しやすくなります。
描画範囲と値の尺度を分離する
SVGにviewBoxを設定し、画面幅に応じて拡大縮小できる座標系を作ります。プロット領域には余白を取り、X座標はカテゴリの中心へ割り当てます。棒と折れ線が同じ期間位置を指すよう、両方で同じX変換を使います。
系列ごとの単位が異なる場合、左右の軸を分けます。データの最小値・最大値から軸範囲を作ると目盛りが読みにくいことがあるため、1、2、5の倍数など見やすい刻みに丸めます。棒系列は積み上げか横並びかを明示し、凡例にも反映します。
欠損値と操作性を扱う
折れ線データに欠損がある場合、0として扱うのか線を切るのかを仕様で決めます。線を切る場合は欠損地点でパスを分割します。棒の幅と隙間はカテゴリ数に応じて制限し、細い画面で重なりにくくします。
ツールチップはSVGのtitleやフォーカス可能な要素など、操作方法に合わせて実装します。色だけで系列を区別せず、凡例、線種、ラベルも使います。画面サイズ変更時は文字が読みにくくならないか確認します。
まとめ
SVGのグラフでは、系列値の変換、描画領域、欠損の意味、操作性を分離して設計します。実際の系列値の端点、欠損、極端値、狭い表示幅を含めて確認しましょう。