jquery - 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 want to display as a line on that column, and possibly add a tooltip that shows the passing grade. The passing grades for each test are not always the same. If the test grade does not meet the passing grade it will be below the line; if it exceeds the passing grade, the line will appear on the column.

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/