CODEWITHSUNDEEP
javascriptchart.jsaxis-labels
Sigma
Sigma

Reputation: 121

How can I display a set amount of ticks on the Y Axis?

I have a chart where I already know the set amount of ticks I'll need. There's 3 with a grouped bar type chart. I'm scratching my head over how to force it. Right now it's showing 0 to whatever number ends up in my data set and auto scales as required.

By default it's assumed I'm using numbers to scale but in this scenario it's a Positive, neutral, negative (those labels literally) on Y-Axis that are the data points related to a specific date on X axis (with 2 grouped bars labeled AM/PM).

The Chart.js documentation doesn't seem to explain how to tweak when working outside of numbers on the ticks configurations and I'm not sure how to shoehorn this in. Any ideas? Below is the code for as far as I've gotten.

The screenshot example I basically simulated the 3 data points by choosing 4,8 and 12. I would like those labels to be (negative,positive,neutral) and make all other ticks disappear.

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Date/MoonCenter', 'Date/MoonCenter', 'Date/MoonCenter'],
        datasets: [{
            label: 'Dataset 1', backgroundColor: window.chartColors.red,
stack: 'Stack 0',
            data: [4, 12, 4, 8, 12, 4]
        },{
            label: 'Dataset 1', backgroundColor: window.chartColors.blue,
stack: 'Stack 1',
            data: [8, 8, 12, 4, 4, 12]          
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

Chart as it looks currently

Upvotes: 4

Views: 608

Answers (2)

HeadhunterKev
HeadhunterKev

Reputation: 1788

Additional to saul's answer: Just add max-settings to the y-axis.

ticks: {
  max: 12
}

You also have to do callbacks for the tooltip if you want to display "positive", "negative" and "neutral" instead of 4, 8 and 12.

Upvotes: 0

youDaily
youDaily

Reputation: 1384

you just need add the callback in the ticks,

<canvas id="myChart" width="400" height="400"></canvas>
<script src='Chart.js'></script>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Date/MoonCenter', 'Date/MoonCenter', 'Date/MoonCenter'],
            datasets: [{
                label: 'Dataset 1', backgroundColor: window.chartColors.red,
                stack: 'Stack 0',
                data: [4, 12, 4, 8, 12, 4]
            }, {
                label: 'Dataset 1', backgroundColor: window.chartColors.blue,
                stack: 'Stack 1',
                data: [8, 8, 12, 4, 4, 12]
            }]
        },
        options: {
            scales: {
                yAxes: [
                    {
                        ticks: {
                            beginAtZero: true,
                            callback: function (label, index, labels) {
                                switch (label) {
                                    case 4:
                                        return 'negative';
                                    case 8:
                                        return 'positive';
                                    case 12:
                                        return 'neutral';
                                }
                            }
                        }
                    }
                ]
            }
        }
    });
</script>

Upvotes: 3

Related Questions