Question

Hi I am trying to create a simple column chart with high charts.

The chart displays a students grades for four assignments.

Each of the four assignments is listed across the x-axis.

The y Axis should display each of the possible grades A – E consecutively (i.e. each letter MUST appear on the axis, even if there is no data in the series for that grade).

I have tried using numbers to signify the grades in my series data and then using the suggestion at Highcharts text labels for y-axis to manually populate the y-axis, but only the first grade shows.

Plus, when I alert(this.value) in the label formatter function, I get a sporadic series of numbers returned(0,500,0,5,10), of which only a couple bare any relation to the numbers in my series data. Help Please!

Here is my code;

$(document).ready(function(){

    var seriesData = [{
                    name: 'Grade',
                    data: [5,2,1,4]
                    }];

    var xAxisLabels = {categories: ['Assignment One', 'Assignment Two', 'Assignment Three', 'Assignment Four']};

    var yAxisLabels = ['E','D','C','B','A'];

    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'chart',
            defaultSeriesType: 'column'
        },
        series: seriesData,
        xAxis: xAxisLabels,
        yAxis: {        
            labels: {
                formatter: function() {
                    return yAxisLabels[this.value];
                }
            }
        }

    });


});

Answer 1

Since javascript array indices start at 0 you have to add an empty label since your values range from (5:A to 1:E).

I added a tooltip formatter to change the label of the tooltip to show the grades as well and not the numeric values.

$(document).ready(function(){
    var seriesData = [{
                    name: 'Assignments',
                    data: [5,2,1,4]
                    }];

    var xAxisLabels = {categories: ['Assignment One', 'Assignment Two', 'Assignment Three', 'Assignment Four']};

    var yAxisLabels = ['','E','D','C','B','A'];

    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'chart',
            defaultSeriesType: 'column'
        },
        title: { text: 'Achievements of John Doe' },
        series: seriesData,
        xAxis: xAxisLabels,
        yAxis: {
            endOnTick: true,
            min: 0,
            max: 5,
            title: { text: 'Grade' },
            labels: {
                formatter: function() {
                    return yAxisLabels[this.value];
                }
            }
        },
        tooltip: {
            formatter: function() {
                return this.x+': '+yAxisLabels[this.y];
            }
        }
    });
});