У меня есть следующий график, использующий график. js
Мне нужно сложить только линию с соответствующими барами, если я использую stacked: true в xAxes, все данные объединены, но я хочу только данные строки с данными столбца, как я могу это сделать?
Мне нужно скрыть все данные нулей, могу ли я иметь это с диаграммой. js?
Это мой код:
myChart2 = new Chart(ctxTarifa, {
type: 'bar',
data: {
datasets: [{
type: 'bar',
label: 'Tarifa Não se Aplica',
borderColor: "#530484",
backgroundColor: "#530484",
data: dataTarifaNSA,
}, {
type: 'line',
fill: false,
label: 'Tarifa Não se Aplica Variação',
borderColor: "#530484",
backgroundColor: "#530484",
data: dataTarifaNSAV,
}, {
type: 'bar',
label: 'Tarifa Fora Ponta',
borderColor: "green",
backgroundColor: "green",
data: dataTarifaFP,
}, {
type: 'line',
fill: false,
label: 'Tarifa Fora Ponta Variação',
borderColor: "green",
backgroundColor: "green",
data: dataTarifaFPV,
}, {
type: 'bar',
label: 'Tarifa Intermediário',
borderColor: "orange",
backgroundColor: "orange",
data: dataTarifaIntmed,
}, {
type: 'line',
fill: false,
label: 'Tarifa Intermediário Variação',
borderColor: "orange",
backgroundColor: "orange",
data: dataTarifaIntmedV,
}, {
type: 'bar',
label: 'Tarifa Ponta',
borderColor: "red",
backgroundColor: "red",
data: dataTarifaPonta,
},
{
type: 'line',
fill: false,
label: 'Tarifa Ponta Variação',
borderColor: "red",
backgroundColor: "red",
data: dataTarifaPontaV,
},
],
labels: labels
},
options: {
plugins: {
datalabels: {
display: function (context) {
var index = context.dataIndex;
var value = context.dataset.data[index];
return value > 0; // display labels with a value greater than 0
}
}
},
elements: {
rectangle: {
borderWidth: 2,
borderColor: 'rgb(128, 128, 128)',
borderSkipped: 'bottom'
}
},
title: {
display: true,
position: 'top',
text: ['Tarifas'],
fontSize: 14
},
responsive: true,
scales: {
xAxes: [{
}],
yAxes: [{
callback: function(value, index) {
if (value !== 0) return value + 'R$';
},
ticks: {
beginAtZero: true,
callback: function (label, index, labels) {
return label + ' R$';
}
},
}]
},
tooltips: {
callbacks: {
label: (tooltipItem, chart) => {
const realValue = chart.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]
const customValue = realValue + ' R$';
const label = chart.datasets[tooltipItem.datasetIndex].label + ':';
return label + customValue;
}
}
}
}
});