How to name axis with Chart.js

Question

Hello everybody,

I'm doing some bar charts with chartjs...everything goes well but i can't find how to name my axes the clean way, i mean without using css trick like position absolute etc..

for example, this is one of my chart :

function buildResultChart(suffix, vous, moyenne) {
var pixelRatio = window.devicePixelRatio || 1;
var $chart = $('#result-chart-' + suffix);
var width = $chart.parents('.inner').width() / pixelRatio;

var containerWidth = $('.container').width();
if (containerWidth < 320) {
    containerWidth = 320;
}
if (containerWidth > 600) {
    containerWidth = 600;
}
var width = containerWidth - 40;
$chart.attr('width', width);


var goodColor = 'rgba(200,245,0,1)';
var badColor = 'rgba(255,254,134,1)';
var color = goodColor;
if (moyenne < vous) {
    color = badColor;
}

var ctx = document.getElementById("result-chart-" + suffix).getContext("2d");
    var data = {
    labels: ['Votre salon'],
    datasets: [
        {
            fillColor: "rgba(220,220,220,1)",
            fillColorAlt: color,
            strokeColor: "rgba(220,220,220,1)",
            data: [vous]
        },
    ]
    };

var max = Math.round(Math.max(vous, moyenne));

//highest 100 next
var len = max.toString().length;
var first = max.toString().substring(0, 1);
if (first === '9') {
    len++;
    first = '1';
}
else {
    first = parseInt(first) + 1;
}
while (--len) {
    first += '0';
}
var max = first;
var steps = 10;
var stepWidth = Math.round(max / steps);

var c = new Chart(ctx).Bar(data, {
    align: 'h',
    scaleShowLabels:true,
    scaleFontColor: '#fff',
    scaleLineColor: '#fff',
    scaleShowGridLines: false,
    barShowStroke: false,
    animationSteps: 80,
    scaleOverride: true,
    scaleStartValue: 0,
    scaleSteps: steps,
    scaleStepWidth: stepWidth
});
}

Maybe someone could help me?

Thanks a lot!

Answer 1

Hello,

For the ones who have the same problem, a new version of chartJS is in dev mode, you can see it there newChartJS. This version seems to let you name your axis but doesn't work 100% the same way than the older so, be careful :)