locked
In ChartJS, Make y label vertical RRS feed

  • 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

    Friday, December 6, 2019 9:31 AM

Answers

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 9, 2019 10:05 AM

All replies

  • User1126057398 posted

    Any Suggestions...

    Monday, December 9, 2019 5:32 AM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 9, 2019 10:05 AM
  • User1126057398 posted

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

    Thursday, December 12, 2019 8:00 AM
  • 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>

    Thursday, December 12, 2019 11:54 AM