Removendo legenda em gráficos com chart.js v2

105

Estou fazendo uma homepage usando, Bootstrap, JQuery e Chart.js (v2). Minha implementação estava funcionando usando v1, mas recentemente entrei no Bower e baixei a v2 usando isso.

Estou fazendo uma grade de 4 colunas, cada uma contendo um gráfico de pizza, no entanto, a escala na v2 é meio confusa para eu começar a trabalhar. Quero que os gráficos sejam responsivos para que sejam escalonados adequadamente com dispositivos menores, como tablets e smartphones, e um dos meus problemas é me livrar da legenda dos gráficos, bem como das informações ao passar o mouse sobre as seções do meu gráfico.

index.html

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
        </div>
    </div>
</body>

functions.js

$(document).ready(function(){
    var canvas = $("#chart1");
    var data = {
        labels: [],
        datasets: [{
            data: [10, 10],
            backgroundColor: ["#F7464A", "#FDB45C"],
            hoverBackgroundColor: ["#FF5A5E", "#FFC870"]
        }]
    };

    var chart1 = new Chart(canvas, {
        type: "pie",
        data: data,
    });
});

Se eu remover o campo vazio "rótulos", o gráfico não funcionará mais. E, ao que parece, há um pequeno espaçamento no topo do gráfico que pode indicar que os cabeçalhos estão escritos, mas são apenas strings vazias.

Alguém tem uma ideia de como remover a legenda e a descrição do foco? Eu simplesmente não consigo entender como isso é usado

Vou colocar minhas mãos em um jsfiddle assim que tiver tempo!

EDITAR: Link para os documentos: https://nnnick.github.io/Chart.js/docs-v2/#getting-started

javascript jquery css charts chart.js2 Zeliax
fonte

Respostas:

252

O objeto de opções pode ser adicionado ao gráfico quando o novo objeto Gráfico é criado.

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
         legend: {
            display: false
         },
         tooltips: {
            enabled: false
         }
    }
});
BrightIntelDusk
fonte
1
Muito obrigado, eu estava usando o react e esta forma de reagir .. <Donut data = {data} options = {{legend: false}} />
Newton Sheikh
42

Você pode alterar as opções usando Chart.defaults.globalem seu arquivo javascript. Portanto, você deseja alterar as opções de legenda e dica de ferramenta.

Remover legenda

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

Remover Dica de Ferramenta

Chart.defaults.global.tooltips.enabled = false;

Aqui está um violinista trabalhando.

cmlonder
fonte
Legal. Não sabia como usar essas funções porque não sabia que poderia simplesmente escrever esses comandos no meu Javascript.
Zeliax de
1

Você simplesmente precisa adicionar essa legenda de linha: {display: false}

Marinha
fonte
5
como esta resposta é diferente de outras respostas?
Shanteshwar Inde