Highcharts: Show special marker on column chart

Question

I want to put markers on a column chart.

To be precise the chart is a for runs scored in each over in the game of cricket. (a sample generated graph as of now: http://img839.imageshack.us/img839/6091/screenshot20111117at124.png)

Now what I actually want is to show in which over the wicket fell (something like: http://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Dudley_Nourse_Graph.png/350px-Dudley_Nourse_Graph.png), the blue dots on top of the columns.

Is it possible to accomplish this in highcharts? I see a snippet of this in this chart (something like sun depicted here: http://www.highcharts.com/demo/spline-symbols).

Solution 1

I had a similar challenge, where I needed to place specific icons on top of my columns:

To achieve this, I used the formatter callback:

plotOptions: {
  column: {
    dataLabels: {
      enabled: true,
      useHTML: true,
      formatter: function() {
        return '<div style="text-align:center"><div>' + this.y + '</div><div class="dynamic-class-' + this.series.name.toLowerCase() +'"><img src="/path/to/special/icon"></div></div>'; 
      },
      y: 0
    }
  }
}

As you can see, you could then dynamically set an image path or element class based on whatever your x/y/series/point/total/percentage value is.

Finally, you also will need to increase the maxPadding for the yAxis, otherwise the icons/values will be cut off (depending on the icon size, obviously).

To see it in action with some 'dynamic' placeholder pictures, have a look at this jsFiddle: http://jsfiddle.net/DMCXS/

Solution 2

You can use two series, first column, and second scatter with customised marker.

Example: http://jsfiddle.net/NDpu6/

 series: [{
            name: 'Tokyo',
            type:'column',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        }, {
            name: 'New York',
            type: 'scatter',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        }]

Solution 3

In the data array you can specify options for a particular point (such as a custom marker to show):

[...]
 series: [{
         name: 'Tokyo',
         marker: {
            symbol: 'square'
         },
         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, /* HERE >>> */{
            y: 26.5,
            marker: {
               symbol: 'url(/demo/gfx/sun.png)'
            }
         }, 23.3, 18.3, 13.9, 9.6]

      },
[...]

Anyway I don't think is possible to put the marker over the chart element.

http://www.highcharts.com/ref/#point-marker

Comments

[Spencer]

Wow, great simple solution. Wish I'd thought of it before looking around at all the more complex ones.

[PhiLho]

The request was about column charts, markers are visible only in line and area charts...