Freecode Charts and D3 Wrapper | Vaadin

The free powerful library to draw charts, other pictures and wrap the d3 javascript library

Freecode charts and d3 wrapper is a free (Apache Licence 2.0) open-source library to draw dynamically charts or even any pictures using the modern powerful technologies of HTML5 SVG. This library is very easy to use, well-documented, gives you the full capability of modern browsers to draw any charts, pictures and images dynamically. It works in all modern browsers from desktop computers to Android and iOS smartphones, including Firefox, Chrome, Opera, Safari, Internet Explorer 9 and above.

In the provided zip package you can find the tutorial, demo, api docs, samples for both vaadin 6 and vaadin 7.

It is based on another free open-source library called d3 (, which is under BSD licence. The Freecode Chart library provides a way to directly execute d3 commands and so you can use it as a d3 wrapper with or without the chart functionality (you can disable the chart functionality and it becomes just a d3 wrapper).

There are 2 versions of this library: for Vaadin 6 and Vaadin 7. Both versions have the same functionality and the same user interface (so, if you write it for Vaadin6, you do not need to change any your code when writing the same for Vaadin7, just recompile with a new library).

As for the chart functionality, now the supported curve presentations are a line, single points, vertical bars and areas. In the further it is expected to add horizontal bars, pies, donuts. The line, single points and areas can be shown with markers having the shape of a circle, square, triangles (upward, downward, leftward, rightward), rectangle, ring and any custom marker that you can design by yourself (you can use up to 240 own custom markers using the SVG path description).

The library supports multiple axes with labels, titles, ticks, meshing, optionally shows the legend at any position of the chart. You can also enable the values shown above the points and a pop-up value indicator which can move along the chart following the movements of the mouse.

You can set up any custom format for the message shown by the pop-up value indicator.

The colors are highly customizable: you can either set a unique color for each series or set different colors for ascending and descending parts of data or even set a specific color to each piece of line or point, you can design various color schemes and apply different or the same schemes to different charts, and you can also change the color schemes dynamically in the code.

The library supports multiple axes: up to 16 axes at the top, up to 16 axes at the bottom, up to 16 axes at the left and up to 16 axes at the right. All series can belong to any couple of a horizontal axis and vertical axis, the number of series is unlimited.

This library is the beginning to provide the best charts available for today. It is highly customizable and even if now it lacks something, you can complete it using the power of executing commands of d3 library.


Link to this version
StableReleased 26 July 2013Apache License 2.0
Framework Support
Vaadin 6.3+
Vaadin 7.0+
Browser Compatibility
Install with
Release notes - Version 1.0

This version should be considered stable for all functionality except multi-axis support, which has just a beta maturity.