I want to add a line to each column in a Highcharts column chart

Question

Is there any way to add a single line to each column in a column chart? For instance, I have test scores plotted as columns. Each test has a minimal passing grade that I wan

Answer 1

You can use the technique that I have used to create bullet charts, by extending the Highcharts marker symbols to include vertical and horizontal lines.

Highcharts.Renderer.prototype.symbols.vline = function(x, y, width, height) {
    return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
};
Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
    return ['M',x ,y + height / 2,'L',x+width,y + width / 2];
};

Example usage:

• http://jsfiddle.net/jlbriggs/UGs2E/17/

Answer 2

You could use a combination chart. Use columns for the actual grades, and plot a line chart over the top for the passing grades.

 $('#container').highcharts({
    title: {
        text: 'Exam Scores'
    },
    xAxis: {
        categories: ['Test 1', 'Test 2', 'Test 3', 'Test 4', 'Test 5']
    },

    series: [{
        type: 'column',
        name: 'Marks',
        data: [83, 72, 71, 63, 74]
    }, {
        type: 'line',
        name: 'Pass Mark',
        data: [75, 79, 63, 70, 80],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        }

    }]
});

http://jsfiddle.net/hfwLd118/

If you don't like the line, you could use 'scatter' instead.

{
        type: 'scatter',
        name: 'Pass Mark',
        data: [75, 79, 63, 70, 80],
        marker: {
            symbol:'triangle'
        }

http://jsfiddle.net/sozhojst/

Note, you can supply your own image for the symbol if you don't like triangles.