Chart.jsで長い項目を表示するときのハマりどころ

Chart.jsで長い項目を表示するときのハマりどころウェイブ×ゆめみふなよいJS/TS LT会 2025/11/12 @__yumechi

当日スライドが間に合わなかったので作り直したバージョンです

X: @__yumechi misskey: @[email protected] 自己紹介 • Motoki Hirao (X: __yumechi)
• 普段はバックエンドエンジニア • JavaScript の話でLTするのは10年ぶり…？ ◦ キャリアの最初はフロントエンドエンジニアをやっていたため • 普段はゲームしてるか、読書してるか、カンファレンスにいるか、カンファレンスのスタッフをしています ◦ PyCon mini Shizuoka にもぜひ来てね ◦ https://shizuoka.pycon.jp/2026

X: @__yumechi misskey: @[email protected] 概要 • Chart.js で表示を良くするためには色々大変！ ◦ 実演を交えて紹介します
◦ 特に長いデータを入れた時の挙動が結構微妙だな… と思っています • ちょっと前にやったものをClaude Codeで再現して、実現しているものになります ◦ なのでコード自体はほぼ Claude Code に書かせていて、細かめのチューニングだけ行っています

X: @__yumechi misskey: @[email protected] Chart.js って何？ • データをグラフに変換できるライブラリ ◦ https://www.chartjs.org/
• canvas 機能を使って描画する • 棒グラフ以外にも円グラフ、チャートなどを作ることができる • 今回取り上げている通り、ちょっと癖があるので日本語環境で使う場合は気を付けるポイントあり

コード見たい方はリポジトリへ https://github.com/yumech i/my-playground-chartjs

実例見たい方はページを見てください https://www.yumechi. work/my-playground-c hartjs/

そのまま入れてみる

X: @__yumechi misskey: @[email protected] 気になる点 • 項目名がめっちゃ切れてる ◦ 見た目としてはかなりひどい ◦
左揃えにしてある程度のところで文字列を切る戦略にすればよさそう ◦ まずはここを何とかしたい

X: @__yumechi misskey: @[email protected] 気になる点 • だいぶもったりして見える ◦ 縦幅に対し、フォントが小さいためすごくスカスカな印象を受ける ◦
バー、カテゴリのサイズを調整する ◦ CSSでも高さを制限する ▪ 本来は項目数分でうまく計算して出せるとよいのですが、今回はデモで html, javascript というシンプルな構成なので固定値です

X: @__yumechi misskey: @[email protected] 気になる点 • 項目名が横にすごく伸びてしまっている ◦ 読みづらさがある ◦
システムとしてみた時のだらしなさも感じる ◦ CSS による width の調整 ◦ 細かめのレイアウト調整

X: @__yumechi misskey: @[email protected] 気になる点 • width を調整したことで左に寄りすぎて見えている ◦ html
タグで調整する（AIに聞くと Chart.js の機能でできるよ！って言ってくるが、なんかうまくできませんでした（解決策募集）） • これまで見せていなかったが、環境によってはツールチップが非常に見ずらい ◦ ツールチップも折り返そう

これでかなり一般的な基準で見ても違和感がないレベルになった… かも？

X: @__yumechi misskey: @[email protected] まとめると • Chart.js で項目をグラフ化するのはかんたんにできる • 一方で、長い項目については割と作り込みが必要
◦ 商品名 ◦ 所属名 • 表示に関しても Chart.js で提供されている機能だけでなく、CSSなどの機能を使って補助したほうが良い • どちらにしろ落とし所としては業務要件とか満たしたいものに合わせること

X: @__yumechi misskey: @[email protected] 宣伝 • https://x.com/oyakata2438/status/1986061495785152711 • こちらの『ワンストップ食』に寄稿しております ◦
いろいろ合間を縫って書きました、意外とチャレンジしたことがないものを取り上げたと思うので、興味を持っていただけると幸いです • 11/16(日) 技術書典19 『え11』にて頒布予定！

X: @__yumechi misskey: @[email protected] 利用情報 • スライド作成: Google Slide https://www.google.com/slides/about/
• フォント: BIZ UDGothic https://fonts.google.com/specimen/BIZ+UDGothic

Chart.jsで長い項目を表示するときのハマりどころ

Chart.jsで長い項目を表示するときのハマりどころ

yumechi(Motoki Hirao)

More Decks by yumechi(Motoki Hirao)

Other Decks in Programming

Featured

Transcript