https://github.com/xdev-software/vaadin-chartjs-wrapper
A Chart.js 4+ Wrapper for Vaadin
https://github.com/xdev-software/vaadin-chartjs-wrapper
chart chartjs vaadin vaadin-addon
Last synced: 6 months ago
JSON representation
A Chart.js 4+ Wrapper for Vaadin
- Host: GitHub
- URL: https://github.com/xdev-software/vaadin-chartjs-wrapper
- Owner: xdev-software
- License: apache-2.0
- Created: 2025-06-24T12:20:13.000Z (8 months ago)
- Default Branch: develop
- Last Pushed: 2025-08-17T04:22:00.000Z (6 months ago)
- Last Synced: 2025-08-18T01:37:47.628Z (6 months ago)
- Topics: chart, chartjs, vaadin, vaadin-addon
- Language: Java
- Homepage: https://vaadin.com/directory/component/chartjs-wrapper-for-vaadin
- Size: 1.47 MB
- Stars: 5
- Watchers: 0
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
[](https://vaadin.com/directory/component/chartjs-wrapper-for-vaadin)
[](https://mvnrepository.com/artifact/software.xdev/vaadin-chartjs-wrapper)
[](https://github.com/xdev-software/vaadin-chartjs-wrapper/actions/workflows/check-build.yml?query=branch%3Adevelop)
# 
Chart.js Wrapper for Vaadin
A [Chart.js](https://www.chartjs.org/) 4+ Wrapper for Vaadin
## Usage
For more and detailed usage examples please have a look at [the demo](./vaadin-chartjs-wrapper-demo/src/main/java/software/xdev/vaadin/chartjs/demo/).
### Minimal
```java
// Assumes that this code is in some kind of Vaadin component or view
ChartContainer chart = new ChartContainer();
this.add(chart);
chart.showChart(
"{\"data\":{\"labels\":[\"A\",\"B\"],\"datasets\":[{\"data\":[1,2],\"label\":\"X\"}]},\"type\":\"bar\"}");
// Or utilizing chartjs-java-model
chart.showChart(new BarChart(new BarData()
.addLabels("A", "B")
.addDataset(new BarDataset()
.setLabel("X")
.addData(1)
.addData(2)))
.toJson());
```
### Recommended
1. Use a Java model of Java model of Chart.js's configuration, like [XDEV's chartjs-java-model](https://github.com/xdev-software/chartjs-java-model).
Otherwise you have to write the JSON yourself.
2. Optionally derive classes for your charts (from e.g. ``ChartContainer``) that also handle the data-to-JSON conversion logic.
Therefore you can encapsulate the components properly, for example like this: ``FetchFromBackendService.class → Model for chart → ChartContainer.class → Build JSON and show chart``
Here is a example how the code could look (click to expand)
1. Define a custom chart or use the ``showChart``-method directly.
Example:
```java
public class ExampleChartContainer extends ChartContainer
{
public void show(Data data)
{
BarData data = ...; // Build the bar chart data from the handed over data
this.showChart(new BarChart(data)
.setOptions(new BarOptions()
.setResponsive(true)
.setMaintainAspectRatio(false)
.setPlugins(new Plugins()
.setTitle(new Title()
.setText("Age")
.setDisplay(true))))
.toJson());
}
}
```
2. Add the chart to your view/component:
```java
public class ExampleView extends VerticalLayout
{
private final ExampleChartContainer chart = new ExampleChartContainer();
public ExampleView()
{
this.add(this.chart);
// ...
}
private void loadDataAndShowChart()
{
this.chart.showLoading();
UI ui = UI.getCurrent();
CompletableFuture.runAsync(() -> {
try {
var data = ...; // Load some data from the backend
// You may also convert the data here and call showChart
ui.access(() -> this.chart.show(data));
} catch (Exception ex) {
// Display the error message when loading fails
ui.access(() -> this.chart.showFailed(ex.getMessage()));
}
});
}
}
```
## Installation
[Installation guide for the latest release](https://github.com/xdev-software/vaadin-chartjs-wrapper/releases/latest#Installation)
### Spring-Boot
* You may have to include ``software/xdev`` inside [``vaadin.allowed-packages``](https://vaadin.com/docs/latest/integrations/spring/configuration#configure-the-scanning-of-packages)
## Run the Demo
* Checkout the repo
* Run ``mvn install && mvn -f vaadin-chartjs-wrapper-demo spring-boot:run``
* Open http://localhost:8080
Show example
## Support
If you need support as soon as possible and you can't wait for any pull request, feel free to use [our support](https://xdev.software/en/services/support).
## Contributing
See the [contributing guide](./CONTRIBUTING.md) for detailed instructions on how to get started with our project.
## Dependencies and Licenses
View the [license of the current project](LICENSE) or the [summary including all dependencies](https://xdev-software.github.io/vaadin-chartjs-wrapper/dependencies)
Disclaimer: This is not an official Chart.js product and not associated