Who doesn’t like easy to use, free charts?

Recently I was working on a site that required interactive charts. I researched a couple options and stumbled upon Highcharts.com in the process. Highcharts is JavaScript charting library that is highly compatible, offers numerous chart options, easy to use and… oh yeah it’s free for non-commercial use ($80 for commercial use).

linechart

As you can see, there is a nice tooltip that pops up as you hover. You also have the ability to zoom in closer to the data.

Highcharts is compatible on all modern browsers (and > IE6). It also relies on JavaScript and not client side programs like Flash. So you don’t need to worry about version Flash player your end user has. All you need to get high charts up and running is the highcharts.js core, a canvas emulator for IE, and either the jQuery or the MooTools framework. To do simple modifications, you don’t need to do any hardcore programing. This makes it really easy to work with as a designer.

piechart

Here you can eliminate sections of the pie chart by clicking on their counterpart in the legend on the right.

You have the ability to make line, spline, area, areaspline, column, bar, pie and scatter chart types. Charts can also animate when the page loads. Once loaded there are a couple nice interactive features like eliminating data, zoom and hovering tooltip text. These attributes can all be edited with little knowledge of JavaScript. Check out some demos to see the charts in action.

Highcharts is one of many options out there, but it’s simple designs and easy functionality win me over. If you are looking for some other nice chart options check out Google Chart API and JS Charts.