CODEWITHSUNDEEP
javascriptchartshighcharts
Mark
Mark

Reputation: 1680

Highcharts - Column/bar chart with target lines

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: enter image description here

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?

Upvotes: 3

Views: 4113

Answers (1)

morganfree
morganfree

Reputation: 12472

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/

Upvotes: 7

Related Questions