On a recent project I've been working on, Markolio (market portfolio), we wanted to chart historical pricing data. After a quick Google search, Highcharts / Highstocks became the obvious option. I came across a few roadblocks while getting my graph functioning properly, so I figured I would share my solution to hopefully help others.
My full Highstocks configuration is as follows:
The above code will calculate the difference between the first and last points when the graph is loaded, as well as when the user zooms in on any point of the graph. The calculation happens if the user clicks one of the pre-defined ranges via the range selector, or if they manually zoom in on a portion of the graph.
The last little feature here is the year to date value in the range selector. I didn't come across this in the documentation, but rather on the Highcharts Github page. This is pretty straight forward as well.