JavaScript：chart.jsのツールチップで空白値の際、「NaN」を表示させないようにしたい。

Question

chart.jsを使い積立グラフの作成をしました。

 var ctx = document.getElementById("LineChart").getContext('2d');
 var chart = new Chart(ctx, {
   type: "bar",
   data:{
     labels:["1月","2月","3月","4月","5月","6月","7月"],
     datasets:[{
       label:"要素1",
       data:[4,5,9,14,,24,30],
     },
     {
       label:"要素2",
       data:[,1.5,1.9,1.4,1.5,2,4,3.0],
     }]
   },
   options:{
     tooltips: {
       mode: 'nearest',
       intersect: false,
       mode: 'index',
     },
     scales:{
       xAxes:[{
         stacked: true
       }],
       yAxes:[{
         stacked: true
       }]
     }
   }
 });

mode: 'index'を記述し、マウスホバー時に全ての要素を表示するよう設定したのですが、空白値の場合「NaN」が表示されてしまいます。
これを表示したくないのですが、どのようにしたら良いでしょうか？

<script>
 var ctx = document.getElementById("LineChart").getContext('2d');
 var chart = new Chart(ctx, {
    type: "bar",
    data:{
      labels:["1月","2月","3月","4月","5月","6月","7月"],
      datasets:[{
        data:[4,5,9,14,,24,30],
      },
      {
        data:[,1.5,1.9,1.4,1.5,2,4,3.0],
      }]
    },
    options:{
      tooltips: {
        mode: 'nearest',
        intersect: false,
        mode: 'index',
        callbacks: {
          label: item => item.value.replace('NaN', '')
        }
      },
      scales:{
        xAxes:[{
          stacked: true
        }],
        yAxes:[{
          stacked: true
        }]
      }
    }
  });
</script>

<div style="width:100%; overflow-x:auto; overflow-y:visible">
  <div class="linechart_container">
    <canvas id='LineChart'></canvas>
  </div>
</div>

Answer 1

こんにちは

ツールチップコールバック の label を使えばできるかと思います。

たとえば、以下の３行を tooltips の設定に追加します。

callbacks: {
  label: item => item.value.replace('NaN', '') 
}

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/gOYNVLO?editors=1010

上記によって NaNのほうのラベルは表示されなくなります。
以上、参考になれば幸いです。

Comments

[退会済みユーザー]

アドバイスありがとうございます。
私の理解が足りないのかもしれませんが、上記を追記したところ、ツールチップ自体が表示されなくなってしまいました。

[退会済みユーザー]

動作確認用CodePenでは確認出来たので、こちらの設定に問題があるようです！

[退会済みユーザー]

やはりツールチップ自体が表示されなくなってしまったのですが、何か原因は考えられますでしょうか？
動作確認用コードのままにしても同じでした。

[jun68ykt]

コメントありがとうございます。
それでは、上記を追記した、現状の（意図通り動かない）コードを、ご質問のほうに追記頂けますでしょうか？

[退会済みユーザー]

お手数掛けてすいません。
そして丁寧な対応ありがとうございます。

[jun68ykt]

追記を拝見しましたが、コピペのミスとか、そういうことではなさそうですので、
以下のように、アロー関数を使わないように修正してみると、いかがでしょうか？

修正前

label: item => item.value.replace('NaN', '')

修正後

label: function(item) { return item.value.replace('NaN', ''); }

動作確認用CodePen
https://codepen.io/jun68ykt/pen/xxKvxKE?editors=1010

[jun68ykt]

上記の修正で動くかもしれないと考えた理由としては、

> ツールチップ自体が表示されなくなってしまった

という不具合の起こり方から、可能性として、アロー関数がサポートされていないブラウザ（Internet Explorer)をお使いなのかなと思われたからです。

[退会済みユーザー]

ご丁寧にありがとうございます。
結果的にはchart.jsのバージョンを2.8.0にしたら正常に動作しました。
とても助かりました。
ありがとうございました！

[jun68ykt]

どういたしまして。解決されたようで、よかったです????

[退会済みユーザー]

すいません。もう一点だけお聞きしたいのですが、例えば、先ほどのデータですと、２つのlabelがありますが、このラベルをツールチップに表示するにはどのようにしたら良いでしょうか？

[jun68ykt]

それは、

データがNaNの場合も、ツールチップに正方形のアイコンは表示させたい

ということでしょうか？もし上記でしたら、

label: item => item.value.replace('NaN', '')

で、replace後の文字列を空文字列ではなく

label: item => item.value.replace('NaN', ' ')

のように１個のスペースにすればよいかと思います。

https://codepen.io/jun68ykt/pen/OJLKPgy?editors=1010

[退会済みユーザー]

言葉が足りずに申し訳ございません。
data:{
labels:["1月","2月","3月","4月","5月","6月","7月"],
datasets:[{
label:"要素1",
data:[4,5,9,14,,24,30],
},
{
label:"要素2",
data:[,1.5,1.9,1.4,1.5,2,4,3.0],
}]
},
であれば、ツールチップに要素１と要素２が表示されるようにしたいという事になります。

[jun68ykt]

以下でどうでしょう？

https://codepen.io/jun68ykt/pen/gOYNVLO?editors=1010

[退会済みユーザー]

ご丁寧にありがとうございます。
色々と本当に申し訳ないです。感謝致します。

例えば、これでその月にデータが存在しないラベルは非表示にするという事は出来ますでしょうか？
例えば、
１月
要素１：４
要素２：
となっているところを、
要素１：４だけ表示出来たらなと思うのですが、、、。
何から何まで頼り切りで申し訳ございません。

[jun68ykt]

それであれば、こうですね。
https://codepen.io/jun68ykt/pen/gOYNVLO?editors=1010

[退会済みユーザー]

無事解決しました。
夜遅くまで付き合って下さり本当にありがとうございました！

[jun68ykt]

????