CODEWITHSUNDEEP
javascripthighcharts
user1356671
user1356671

Reputation: 13

How do I add column-specific plotlines using High Charts?

I am trying to make a column chart using js HighCharts that has 2 unique plotlines for each column of the chart, rather than a single plotline that spans the width of the entire chart.

This way I will be able to show a max and min value for EACH column.

Upvotes: 1

Views: 1385

Answers (1)

jlbriggs
jlbriggs

Reputation: 17800

You can't make an actual plot line that works that way.

You can use a scatter series, and define a custom line marker type, like here:

http://jsfiddle.net/highcharts/e96yX/

example code for both a horizontal line and a vertical line:

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

alternatively, based on your question, a column range chart may be helpful as well:

http://highcharts.com/demo/columnrange

Upvotes: 1

Related Questions