Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Galera preciso colocar dois datasets na mesma coluna do gráfico de barras,desse jeito:
Meu gráficos está assim:
Código:
<script>
var ctx = document.getElementById('chartBar').getContext('2d');
var stackedBar = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
datasets: [{
data: [2, 10, 5, 6, 20, 30, 45,20, 10, 5, 2, 20,0, 10, 5, 6, 20, 30, 45,20, 10, 5, 2, 20],
backgroundColor: 'rgb(0, 128, 160)',
borderColor: 'rgb(0, 128, 160)',
}]
},
options: {
scaleBeginAtZero : true,
scaleShowGridLines : true,
scaleGridLineColor : "rgba(0,0,0,.005)",
scaleGridLineWidth : 0,
scaleShowHorizontalLines: true,
scaleShowVerticalLines: true,
barShowStroke : true,
barStrokeWidth : 0,
tooltipCornerRadius: 2,
barDatasetSpacing : 3,
scales: {
xAxes: [{
stacked: true,
ticks: {
}
}],
yAxes: [{
stacked: true
}]
}
}
});
</script>
<div class="col-md-6"> <canvas id="chartBar" height="150"></canvas></div>
Alguém pode me ajudar?Já tentei sim! ele fica encima dos que já tem, juntando os dois e fazendo uma coluna só.
Esse exemplo aqui é o que você quer:
http://www.chartjs.org/samples/latest/charts/bar/vertical.html
Certeza que é uma opção a mais para virar dois. Tipo label: 'Dataset 1',
Consegui achar uma solução aqui!!
options: {
tooltips: {
callbacks: {
label: function (t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
return xLabel + ': ' + yLabel;
}
}
},
legend: {
display: false,
position: 'top',
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function (value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else { return '$' + value; }
}
}
}]
}
},
plugins: [{
beforeDraw: function (chart) {
var labels = chart.data.labels;
}
}]
Coloquei esse trecho que achei em um site gringo e funcionou!
Obrigado!
olha pra estrutura, já tentou:
datasets: [{
data: [2, 10, 5, 6, 20, 30, 45,20, 10, 5, 2, 20,0, 10, 5, 6, 20, 30, 45,20, 10, 5, 2, 20],
backgroundColor: 'rgb(0, 128, 160)',
borderColor: 'rgb(0, 128, 160)'
},
{
data: [2, 10, 5, 6, 20, 30, 45,20, 10, 5, 2, 20,0, 10, 5, 6, 20, 30, 45,20, 10, 5, 2, 20],
backgroundColor: 'rgb(255, 0, 160)',
borderColor: 'rgb(255, 0, 160)'
}]