1👍
There is no any issue with your code. Its just a scale problem. I adjusted your yAxis. It needs a little bit much more work because you have negative values and log(0) is undefined.
var userLowerList = JSON.parse('["5 Mar", "6 Mar", "7 Mar", "8 Mar", "9 Mar", "10 Mar", "11 Mar"]')
var userDataList = JSON.parse('[[10000000, 10, 0, 0, 0, 0, 0], ["-0", "-0", "-0", "-50", "-0", "-0", "-0"]]')
var data = {
labels: userLowerList,
datasets: [{
label: "Credit",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
data: userDataList[0],
}, {
label: "Debit",
backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: "rgb(54, 162, 235)",
borderWidth: 2,
data: [-65, -59, -20],
}, ]
};
var myBarChart = new Chart($("#chartJSContainer"), {
type: 'bar',
data: data,
maintainAspectRatio: false,
options: {
scales: {
yAxes: [{
stacked: true,
id: 'first-y-axis',
position: 'left',
type: 'logarithmic',
ticks: {
callback: function(value, index, values) {
if (value === 1000000) return "1M";
if (value === 100000) return "100K";
if (value === 10000) return "10K";
if (value === 1000) return "1K";
if (value === 100) return "100";
if (value === 10) return "10";
if (value === 0) return "0";
return null;
}
}
}],
xAxes: [{
barThickness: 20,
maxBarThickness: 20,
stacked: true
}]
}
}
});
- [Chartjs]-ChartJS v2.6 update breaks custom line-with-area-range (stripe) chart
- [Chartjs]-How get sum of total values in stackedBar ChartJs
0👍
Your program is correct, you have a scale problem between both curves,
when you are using high values for the first datas, the second datas are very very small, so the bar is just one or zero pixel, so the datas are not visible for second bar graph.
i suggest you to create a second y axis like this sample 2 axix Y
if you add another yaxis, you couldnt stacked value, or you have to adapt the value form first graph to second graph..
if you have big difference between values, you could modify the type of axis, logaritmic and so on, read the documentation, or see the answer @quentinroger
var config = {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
type: 'bar',
barThickness: 30,
label: 'Credit',
backgroundColor: "green",
yAxisID: 'A',
data: [1500000, 0, 1000, 81, 56, 85, 40],
}, {
type: 'bar',
label: 'Debit',
backgroundColor: "red",
yAxisID: 'B',
data: [-65, 0, -80, -81, -56, -85, -40]
}]
},
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
id: 'A',
stacked: true,
type: 'logarithmic',
ticks: {
max: 10000000,
callback: function(value, index, values) {
if (value === 10000000) return "10M";
if (value === 1000000) return "1M";
if (value === 100000) return "100K";
if (value === 10000) return "10K";
if (value === 1000) return "1K";
if (value === 100) return "100";
if (value === 10) return "10";
if (value === 0) return "0";
return null;
}
}
},
{
id: 'B',
position: 'right',
stacked: true,
max: 0,
beginAtZero: true
}
]
}
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart"></canvas>
- [Chartjs]-Custom labeling/fixed range on x-axis in Chart.js for horizontal bar chart?
- [Chartjs]-Multiple Range Highlighting of Background in Chart.js