「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

TCDテーマDROP:棒グラフ(横)数値の色を変更する方法

Q.質問内容

トップページやLPに設置出来るチャートコンテンツで「棒グラフ(横)」を選択していますが、フォントカラーが白色見えにくいです。
グラフ内の数値の色を変更する方法を教えてください。

▼変更後のイメージ
変更箇所イメージ

A.下記の方法でカスタマイズしてください。

TOPページの変更箇所: front-page.php 328行目付近
固定ページ(LP)の変更箇所: page-lp.php 342行目付近

datalabels: {〜}の中に記載されているcolorの色を別の色に変更してください。

            plugins: {
              datalabels: {
                color:'#fff',
                anchor: 'start',

            plugins: {
              datalabels: {
                color:'#000',
                anchor: 'start',

カラーコードはお好きな色に変更してください。
参考サイト

補足)
・一番うしろの「,」は必ず付けてください。
・カラーコードを囲っている'(シングルクォーテーションマーク)は半角になります。

棒グラフ(横)の中の数値の表記を消す方法

datalabels: {〜}の中に記載されているcolorの色を’transparent’に変更することで、数値を消す(=透明にする)ことが出来ます。

            plugins: {
              datalabels: {
                color:'transparent',
                anchor: 'start',

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事