Highcharts - Column/bar chart with target lines

Question

Using highcharts, what would be the best way to implement target lines over a column or bar chart? (Also known as target vs goal)

Found this picture from a similar d3.js thread as an example:

I'm thinking another series, but don't see any options in the documentation about a target line. Here's a basic column chart: jsfiddle.net/eksh8a8p/

I've thought about using a columnrange series, but you are limited to having a start/end value which can be problematic due to scaling of number values.

Are there other ideas/options that could create a similar result to the picture above?

morganfree morganfree · Accepted Answer · 2017-01-19T22:27:02

You can use a columnrange series but there is a simpler option - a scatter series with a rectangle marker

    //custom marker
    Highcharts.SVGRenderer.prototype.symbols['c-rect'] = function (x, y, w, h) {
       return ['M', x, y + h / 2, 'L', x + w, y + h / 2];
    };

    //series options
    {
      marker: {
        symbol: 'c-rect',
        lineWidth:3,
        lineColor: Highcharts.getOptions().colors[1],
        radius: 10
      },
      type: 'scatter'

example: http://jsfiddle.net/eksh8a8p/1/

Highcharts - Column/bar chart with target lines

1 Answers