Display Bar As An Arrow With Highcharts

Is it possible to draw a column bar chart with Highcharts.js, where one bar is displayed as an arrow? I have following chart $(function () { $('#container').highcharts({ char

Solution 1:

What I would suggest is adding a "dummy" line series with a triangle marker for your arrowhead. I got the inspiration for this from a Highcharts forum post asking a similar question (see http://forum.highcharts.com/highcharts-usage/creating-an-arrowhead-with-the-renderer-t27746/).

Here's the code I worked up, with explanations as comments to what each part does:

/* dummy series */
{ 
    name: 'marker series', 
    type: 'line', 
    lineColor: 'transparent', /* makes line invisible */data: [null,null,50], /* use nulls where you don't want arrowheads to appear */
    showInLegend: false, /* will not show in legend */
    enableMouseTracking: false, /* users can't interact with the series */
    marker: {
        symbol: 'triangle', 
        fillColor: 'rgba(126,86,100,.9)', /* match to the color of your column */
        radius:25
    }
}

See the working fiddle at: https://jsfiddle.net/brightmatrix/hha2o3bu/2/

I hope this is helpful for you!