0👍
✅
Yes, you can add ticks for xAxes, implement the callback and convert your resulting label to anything you want
var ctx = $("#graphTest").get(0).getContext("2d");
var MyScale = Chart.Scale.extend({
});
var options = {
barShowStroke: false,
scaleBeginAtZero: false,
scaleOverride: true,
scaleSteps: 20,
scaleStepWidth: 2,
scaleStartValue: -20,
responsive: true,
barBeginAtOrigin: true,
scales: {
xAxes: [{
stacked: true,
ticks: {
callback: function(label, index, labels) {
return label < 0 ? label * -1 : label;
}
},
scaleLabel: {
display: true,
labelString: 'Nb Fail/Success'
}
}],
yAxes: [{
stacked: true
}]
}
};
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1,
data: [-65, 59, 80, -81, 56, 55, 40],
},
{
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1,
data: [10, -11, -98, 81, -34, -50, -20],
}
]
};
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: data,
options: options
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<canvas id="graphTest" width="400" height="190" style="padding-left:10px; padding-right:10px;"></canvas>
Source:stackexchange.com