Search code examples
javascriptchartsraphaelhighchartsgraphael

Javascript charting plugin which allows to select a portion of an area graph

I'm looking for a javascript charting library which would allow me to build an area chart with an ability to hover the portion between the two adjoining points on the graph curve. Basically like this:

chart illustration

Also as seen on this sample it would be really nice to smooth out the lines between points (use bezier curves instead regular straight lines).

Any help deeply appreciated.

Solution

  • Like @Duniyandn suggested, you can create two series and create rules about what to do with them on mouse interaction.

    If you wanted a static section of red you could do it like this. e.g. http://jsfiddle.net/qXbsu/

    But if you we're trying to have the highlighted section move with the mouse you could do something like this: http://jsfiddle.net/VuePw/2/#run though the matching of the smooth curves wouldn't be possible.

    I use the tooltip formatter function to accomplish both of these because it's an easy proxy for a mousemove callback, not because it's the best way to do it.