1

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];
                }
            }
        }

    });


});

1 Answer 1

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];
            }
        }
    });
});

Highchart output

6
  • That's great! The tool tips have saved me a job as well :) Thank you. Is there any way of ensuring that all of the yAxis labels remain even when I set the height of the chart to 300px using css?
    – user469453
    Feb 18, 2012 at 14:12
  • When you set the height of the <div id="chart"> via css the complete chart should still be shown. Yes.
    – dgw
    Feb 18, 2012 at 14:26
  • That doesn't seem to be the case. When I set it to 300px only the 'B' and 'D' labels are visible?
    – user469453
    Feb 18, 2012 at 14:37
  • 1
    The default yAxis tick interval is 72. 5 times 72 is more than 300. Add tickPixelInterval: 50, to the definition of the yAxis.
    – dgw
    Feb 18, 2012 at 14:45
  • Absolutely spot on :) Thank you very much!
    – user469453
    Feb 18, 2012 at 18:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.