Scripting example 2
The bar chart in Figure 15-13 shows custom objects, stars, that are added through scripting. Each star indicates the highest value for each order status series. A script in afterRendering( ) performs the following tasks:
This script showcases Highchart’s renderer object, which supports drawing shapes, such as circles, rectangles, and stars, and adding images and text to a chart. The renderer is useful for adding annotations to a chart. For example, instead of a star, you can annotate the max value by creating text and enclosing it in a rectangle.
Figure 15-13  
The JavaScript code written for this bar chart appears in Listing 15-3.
Listing 15-3  
afterRendering: function(myChart)
// Get the chart object
// Get the max values from the y-axis series
for ( var i = 0; i < chart.series.length; i++ )
var mySeries = chart.series[i];
var maxValue =[0].y;
var maxValueIdx = 0;
if ( !maxValue )
maxValue = 0;
for ( var j = 1; j <; j++ )
var curValue =[j].y;
if ( !curValue )
if ( maxValue <[j].y )
maxValue =[j].y;
maxValueIdx = j;
var maxPoint =[maxValueIdx];
// Create a group to hold each annotation
var group = chart.renderer.g().add();
// Draw a star based on the width of the column,
// and add it to the group
var star = chart.renderer.path(['M', maxPoint.barW/2, 0,
maxPoint.barW*.4, maxPoint.barW/4,
maxPoint.barW*.05, maxPoint.barW/4,
maxPoint.barW*.325, maxPoint.barW*.475,
maxPoint.barW*.2, maxPoint.barW*.85,
maxPoint.barW/2, maxPoint.barW*.6,
maxPoint.barW*.8, maxPoint.barW*.85,
maxPoint.barW*.675, maxPoint.barW*.475,
maxPoint.barW*.95, maxPoint.barW/4,
maxPoint.barW*.6, maxPoint.barW/4,
fill : 'yellow',
stroke: 'black',
'stroke-width': 1
// Move the group to the top of the correct bar, and set it to
// draw in front of everything in the chart
translateX: maxPoint.barX + chart.plotLeft,
translateY: maxPoint.barY + chart.plotTop - maxPoint.barW - 10

Additional Links:

Copyright Actuate Corporation 2012