Chart.js v2データセットラベルを非表示にする


106

Chart.js v2.1.3を使用してグラフを作成する次のコードがあります。

var ctx = $('#gold_chart');
var goldChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: dates,
        datasets: [{
            label: 'I want to remove this Label',
            data: prices,
            pointRadius: 0,
            borderWidth: 1
        }]
    }
});

コードはシンプルに見えますが、グラフからラベルを削除できません。オンラインで見つけたソリューションをたくさん試しましたが、それらのほとんどはChart.js v1.xを使用しています。

データセットラベルを削除するにはどうすればよいですか?

回答:


252

labeltooltipオプションをそのように設定するだけです

...
options: {
    legend: {
        display: false
    },
    tooltips: {
        callbacks: {
           label: function(tooltipItem) {
                  return tooltipItem.yLabel;
           }
        }
    }
}

フィドル-http://jsfiddle.net/g19220r6/


魅力のように動作します、ありがとう。ところで、折れ線グラフのグラデーションの色を変更するにはどうすればよいですか?
ラプター2016年

1
つまり、borderColor / backgroundColorとしてグラデーションを使用する方法です。コンテキストで1つ作成し、初期化時にそれを使用してください-jsfiddle.net/g9h6gtvxを
potatopeelings

1
あるデータセットでは使用したいが別のデータセットでは使用したくない場合
Nick Alexander

できます!たった1つの質問ですが、これらのオプションはどこで見つけましたか?
fangzhzh

39

追加:

Chart.defaults.global.legend.display = false;

あなたのスクリプトコードの始めに;


シンプルで完璧に動作します。受け入れられた答えがいくつかを壊していることに気づきました。
スティックデオドラント

9

「タイトル」を削除して、ツールチップを1行に配置することもできます。

this.chart = new Chart(ctx, {
    type: this.props.horizontal ? 'horizontalBar' : 'bar',
    options: {
        legend: {
            display: false,
        },
        tooltips: {
            callbacks: {
                label: tooltipItem => `${tooltipItem.yLabel}: ${tooltipItem.xLabel}`, 
                title: () => null,
            }
        },
    },
});

ここに画像の説明を入力してください


8

これを追加するのと同じくらい簡単です: legend: { display: false, }

//または、必要に応じて、次のオプションも使用できます。

Chart.defaults.global.legend.display = false;


簡単な答え、車輪を再発明する必要はありません。
TNT

オプション:{凡例:{表示:false、}}どのブロックに配置するかを書くと役立ちます(これは基本的にドキュメントの問題です)
Normajean

2
new Chart('idName', {
      type: 'typeChar',
      data: data,
      options: {
        legend: {
          display: false
        }
      }
    });

2
こんにちは、SOへようこそ。コードの横に簡単な説明を追加することを検討してください
Bagerard
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.