SO Charts | Vaadin

A wrapper around the "echarts" Javascript library for creating charts.

SO Charts

This add-on is a wrapper around the echarts Javascript library for using it with Vaadin Flow. The charts can be used just like any other Vaadin components.

"echarts" is quite a rich library and bringing all the available functionalities into this add-on will require quite some effort. However, my plan is to keep integrating more and more features into this add-on as and when I have some free time.

Architecture of the Add-on

The client-side part of the add-on is a very thin LitElement wrapper around the "echarts" library. The SOChart class is the one that wraps that into the Java class to make it appear as a Vaadin Flow Component. Communication between them are through a couple of property change messages and a monolithic update call that carries all the chart data (including the configuration information) as a string parameter that can be JSONified. At the client-side, the string parameter received is used to create the structure for setting the options of the chart.

Just before sending the string containing the chart data and the configuration to the client-side, it is passed through a method - customizeJSON(String) - so that if someone wants to debug or customize it, it is very well possible. (Starting from 2.2.0, data can be transmitted separately and that can be intercepted via a new method - customizeDataJSON(String)).

Most classes in this add-on are either "chart components" or "chart component parts". All "chart components" can be added to the SOChart instance (the only Vaadin Flow Component). So, one instance of SOChart class (represents a "chart display") can be used for displaying any number of Charts (instances of Chart class - it is also a "chart component") and other "chart components".

Starting from version 2.1.0, various shapes, including texts and images, can be defined and added to the chart display.

Starting from version 2.2.0, a new method is added to transmit data separately whenever required.

Starting from version 2.3.0, a new method is added to transmit data separately for a specific chart whenever required.

Note: The online demo contains chart examples and other proprietary examples. You may use the keyword "chart" to filter out chart examples.

Notes to those who use Vaadin Spring Configuration: Please make sure that you update your if needed. It has been reported that this add-on may not work if the add-on package is not white-listed there. (Thanks to Marcus Merten for pointing this out). See here
Configuration example of (Thanks to Ryan Neuharth):

vaadin.whitelisted-packages = com.vaadin,org.vaadin,com.storedobject

Credits to other contributors:
(1) Christian Asnel Ngoulla Sob
(2) Stefano Bossi


Link to this version
StableReleased 22 May 2022Apache License 2.0
Framework Support
Vaadin platform 23+
Browser Compatibility
Install with
Release notes - Version 3.0.0

Compiled with Java version 17 and Vaadin 23.0.9
Compatible with Vaadin 23.0.9 upwards
Dependency update (Lit & echarts upgraded)
Bug fixed in axis rendering (Implementation of offset and opposite were buggy)