It can be useful to include information about a chart on a chart. While tooltips is one option, there are times when we may want to leave a note to ourselves. Due to the various events that Highcharts is able to capture, it is possible for us to annotate charts.
For setting up a basic page and installing jQuery and Highcharts, refer to the Getting ready section of the Creating your first chart recipe in Chapter 1, Getting Started with Highcharts.
To get started, perform the following steps:
In addition to the regular chart container, create a text area to enter your annotations, as shown in the following code:
<div id='container'></div> <textarea id='annotation'></textarea>
Create a click handler for your chart, as shown in the following code:
var annotateChart = function (event) { var x, y, text, box, content; x = event.chartX; y = event.chartY; // get content from the textarea content = $('#annotation...