CODEWITHSUNDEEP
javascriptjquerychartshighcharts
StackOverflowNewbie
StackOverflowNewbie

Reputation: 40633

HighCharts - bar chart with indicator

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.

Upvotes: 1

Views: 2311

Answers (3)

Paweł Fus
Paweł Fus

Reputation: 45079

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'); 
          }
        }
      }, 
    }

Upvotes: 1

jlbriggs
jlbriggs

Reputation: 17791

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

Upvotes: 0

Strikers
Strikers

Reputation: 4776

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',
                }
            }
  1. 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

Upvotes: 5

Related Questions