In ChartJS, Make y label vertical

Question

User1126057398 posted

I am trying to Make y label vertical by setting maxRotation & minRotation to 90. Though it's displayed vertical but it leaves lot of space in y-axis if name displayed on y-axis is too long.
When I add padding in negative like below space is removed. But I can't set static value in padding since name(to be displayed on y-axis) can be short or long.

eg.
new Chart(document.getElementById("chart-canvaspn1"),{type: 'horizontalBar', data:{ labels: ['7 whole grain flakes'],datasets: [{ data: [169],label: "Calories", borderColor: "#3e95cd",backgroundColor: "#ffc266", scaleShowGridLines: false,showScale: false,fill: true}]}, options: { title: { display: true}, legend: {position: 'bottom'},scales: { xAxes: [{gridLines: {display:false}, ticks:{beginAtZero:true}}], yAxes: [{gridLines:{display:false},barPercentage: 0.2,maintainAspectRatio:false, ticks: { autoSkip: false,maxRotation: 90, minRotation: 90, padding: -110}}]}}},{ responsive: true});

I had taken reference from : https://stackoverflow.com/questions/28031873/make-x-label-horizontal-in-chartjs

Answer 1

User1126057398 posted

Any Suggestions...

Answer 2

User1535942433 posted

Hi geetasks,

Accroding to your codes,I suggest you could set yAxes's scaleLabel.It is the most standard method.

More details ,you could refer to below code:

<script src="Scripts/jquery-1.10.2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
    <script>
        window.onload = function () {
            var ctx = document.getElementById('myChart').getContext('2d');
            var myChart = new Chart(ctx, {
                responsive: true,
                type: 'horizontalBar',
                data: {
                    //labels: ['7 whole grain flakes'],
                    datasets: [{
                        data: [169],
                        label: "Calories",
                        borderColor: "#3e95cd",
                        backgroundColor: "#ffc266",
                        scaleShowGridLines: false,
                        showScale: false,
                        fill: true
                    }]
                },
                options:
                {
                    title: { display: true },
                    legend: { position: 'bottom' },
                    scales: {
                        xAxes: [{
                            gridLines: { display: false },
                            ticks: { beginAtZero: true }
                        }],
                        yAxes: [{
                            gridLines: { display: false },
                            barPercentage: 0.2, maintainAspectRatio: false,
                            scaleLabel: {
                                display: true,
                                labelString: '7 whole grain flakes'
                            }
                        }]
                    }
                }
            });
        }
</script>

<div style="width: 300px; height: 300px;">
            <canvas id="myChart" width="400" height="400"></canvas>
        </div>

Link:

https://stackoverflow.com/questions/31913967/how-to-set-chartjs-y-axis-title/31918380

Result:

Best regards,

Yijing Sun

Answer 3

User1126057398 posted

Though this works fine. But if I remove labels property, then on bar hover 'undefined' is displayed rather then product name

Answer 4

User1126057398 posted

Done it. Reference: https://codepen.io/k3no/pen/OReEKx?editors=0010

On bar hover, to define product name, I had defined tooltip property.

<canvas id="chart-canvaspn1"></canvas>
<script>
new Chart(document.getElementById("chart-canvaspn1"), {
type: 'horizontalBar', data: { datasets: [{ data: [177.5], label: "Calories", borderColor: "#3e95cd", backgroundColor: "#ffc266", scaleShowGridLines: false, showScale: false, fill: true }] }, options: {tooltips: {callbacks: {title: function () { return 'Almond butter'; },label: function (tooltipItem) {
return "$" + Number(tooltipItem.xLabel) + " and so worth it !";
}}},
title: { display: true }, legend: { position: 'bottom' }, scales: {
xAxes: [{ gridLines: { display: false }, ticks: { beginAtZero: true } }], yAxes: [{
gridLines: { display: false }, barPercentage: 0.2, scaleLabel: {
display: true,
labelString: '7 whole grain flakes'
}
}]
}
}
});
</script>