[Highcharts]グラフタイトルなどに下付き文字が使えない時の対処法


[Highcharts]グラフタイトルなどに下付き文字が使えない時の対処法


[Highcharts]グラフタイトルなどに下付き文字が使えない時の対処法

javascriptで綺麗なグラフを描画できるライブラリ、Highcharts。
とても便利なのですが、多機能すぎて何が出来るのか調べるのも一苦労。
今回は、グラフタイトルやTooltipに下付き文字を付けたい時の対処法です。

スポンサーリンク

グラフタイトルにはsubが使えない!?そんな時の対処法

Highcharts

下付き文字とは、「CO2」で言うところの「2」にあたります。他の文字よりも小さくなっている文字です。
通常HTMLでは<sub> </sub>で囲むのですが、Highchartsでは<sub>が効かない模様。
どうしてもテキストサイズを小さくしたい場合には、少々力業ですが、spanを使って文字サイズを小さくすることができます。
Highcharts公式(英語)のでもページに丁度良いサンプルがあったのでご紹介します。

Highcharts Demo
上記ページにアクセスすると、右側にグラフ、左側にソースが表示されています。
随分長いコードですが、注目して欲しいのは34行目のTooltipの箇所。

「span style=”font-size:11px」としてフォントサイズを指定しています。
この方法で、タイトルの文字サイズも小さくすることができます。
例えば「CO2test」というタイトルを用意します。
タイトルに<sub> </sub>を使っても反映されません。

Highcharts Demo2
ここにTooltipの例を参考にspanでフォントサイズを指定します。

Highcharts Demo3
単純に文字サイズを小さくしただけなので、厳密にはsubとは違うのですが、見た目上近づける事はできました!

Highcharts関連記事沢山あります。

その他、カスタマイズ記事沢山るのでご参考までに!

和風デザイン勉強会