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.


Link to this version
StableReleased 23 August 2021Apache License 2.0
Framework Support
Vaadin platform 14+
Browser Compatibility
Install with
Release notes - Version 2.3.0

Compiled with Java version 11 and Vaadin 14.6.8.
Compatible with Vaadin 14.5.x upwards and 19.x upwards.
There are some additions to the API and refactoring of the code. So, a re-compilation of your existing code is recommended.
New chart type: BubbleChart.
Initial support for "mark areas" in charts.