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