HighCharts - bar chart with indicator

Question

I see how to make stacked bar and column charts in HighCharts. However, I want to be able to put an arrow outside the bar/column to indicate a point in it, similar to this: http://support.sas.com/kb/26/addl/fusion_26104_4_slider_alert.gif

Is this possible in HighCharts? I can't find an example of it.

Answer 1

Of course it is possible.

There are two ways in which you can achieve this.

1. Use a sctterplot.

In this Approach you build a addl scatterchart series . the value of the scatterchart series will help you to position it like in here http://jsfiddle.net/p2MF6/

{
                name: 'indicator',
                data: [5],
                type: 'scatter',
                marker:{
                    //here you can have your url
                    symbol: 'circle',
                }
            }

2. render a image.

using chart.rendere.image(src,x,y,length,height) you can render any image on the chart.

finding the coordinates is not a big deal.

hope this is what you are looking for

Answer 2

Example for you: http://jsbin.com/oyudan/276/edit

Add triangle and function to change scatter position (if you want to add line to marker, just change returned path):

var chart;
$.extend(Highcharts.Renderer.prototype.symbols, {
    'triangle-left': function (a, b, c, d) {
        return ["M", a, b + d, "L", a, b, a + c / 2, b + d / 2, "Z"];
    }
});
Highcharts.updateMarketMarkers = function (chart,action) {
  /* get category width */
  var barWidth = chart.series[0].data[0].pointWidth / 2;
  for(var i = 0; i < chart.series[2].data.length; i++){
    var p =  chart.series[2].data[i];
    if(p.graphic){
       p.graphic[action]({
         x: p.plotX - barWidth - p.graphic.r
       });
    }
  }
};

Now add that function to chart, when should be invoked:

    chart: {
        renderTo: 'container',
        type: 'column',
        showAxes: false,
        events: {
            load: function () {
                Highcharts.updateMarketMarkers(this, 'attr');
            },
            redraw: function () {
                Highcharts.updateMarketMarkers(this,'attr');
            }
        }
    },
    plotOptions: {
      series: {
        events: {
          hide: function(e) { 
             Highcharts.updateMarketMarkers(this.chart,'animate'); 
          },
          show: function() {
             Highcharts.updateMarketMarkers(this.chart,'animate'); 
          }
        }
      }, 
    }

Answer 3

I would use the scatter series approach, as answered above, if you really need a symbol there.

You can also draw a plotLine:

http://api.highcharts.com/highcharts#yAxis.plotLines

This will not include an arrow, of course, but you can draw the line and label in this manner, and IMO the arrow is really not necessary at that point. FWIW