Interactive Charts

[nuwanbando]

Hi,

Any plans on making them interactive. Right now, you don't have tooltips etc for mouse pointers yeah ?

Regards,
/Nuwan

[smaresca]

From http://www.chartjs.org/docs/#generalIssues-chartInteractivity :

"If you are looking to add interaction as a layer to charts, Chart.js is not
the library for you. A better option would be using SVG, as this will let
you attach event listeners to any of the elements in the chart, as these
are all DOM nodes."

On Mon, Mar 18, 2013 at 4:16 AM, Nuwan Bandara notifications@github.comwrote:

Hi,

Any plans on making them interactive. Right now, you don't have tooltips
etc for mouse pointers yeah ?

Regards,
/Nuwan

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/2
.

[patcito]

It would be good though to have basic tooltips support like github does it on its network graph using canvas https://github.com/nnnick/Chart.js/network

[nnnick]

I haven't planned to add interactivity to charts at this stage. The chart is a single canvas DOM node, which is similar in characteristics to an image, but with a lighter footprint.

Canvas graphics sacrifice interactivity to raw speed. It's really up to you what is more important for your particular use case. There are a number of SVG based libraries for providing interactive graphs, including gRaphael, or other libraries built off d3.js.

[dsotirescu]

It is relatively easy to add interactivity: keep a list of chart elements(type, coordinates)+data associated with them, add one method getElementAtMouseCoordinates(x, y). For each type of chart element you need to be able to intersect the mouse coordinate with the element's geometry. Quite easy for bars, a bit more work for pie slices, etc.

This will not sacrifice speed at all.

[dsotirescu]

By the way, your charts look gorgeous!

How difficult is it to add new chart types, for example a heat/tree map?

[liuxiachanghong]

tooltip on mouseover would be great, don't know how implement this though. I like your chart and looking forward to it.