Charba
J2CL and GWT Charts library based on CHART.JS
Install / Use
/learn @pepstock-org/CharbaREADME
Charba - J2CL and GWT Charts library based on CHART.JS
<p align="center"> <a href="https://github.com/pepstock-org/Charba/releases/latest"><img alt="Last release" src="https://img.shields.io/github/release/pepstock-org/Charba.svg"></a> <a href="https://mvnrepository.com/artifact/org.pepstock/charba"><img alt="Mvn repo release" src="https://img.shields.io/maven-central/v/org.pepstock/charba"></a> <a href="https://github.com/pepstock-org/Charba/blob/master/LICENSE"><img alt="License" src="https://img.shields.io/github/license/pepstock-org/Charba.svg"></a> <a href="https://github.com/pepstock-org/Charba/actions/workflows/build.yaml"><img alt="Build" src="https://github.com/pepstock-org/Charba/workflows/Build/badge.svg?branch=master"></a> <a href="https://sonarcloud.io/dashboard?id=pepstock-org_Charba"><img alt="Sonar cloud status" src="https://sonarcloud.io/api/project_badges/measure?project=pepstock-org_Charba&metric=alert_status"></a> <a href="https://sonarcloud.io/component_measures?id=pepstock-org_Charba&metric=ncloc"><img alt="Lines of Code" src="https://sonarcloud.io/api/project_badges/measure?project=pepstock-org_Charba&metric=ncloc"></a> <a href="https://github.com/chartjs/awesome"><img alt="Chart.js awesome" src="https://awesome.re/badge-flat2.svg"></a> <a href="https://pepstock-org.github.io/Charba/current/"><img alt="Last javadoc version" src="https://img.shields.io/badge/Javadoc-Last%20version-F27173.svg"></a> <a href="https://pepstock-org.github.io/Charba/next/"><img alt="Next javadoc version" src="https://img.shields.io/badge/Javadoc-Next%20version-F27173.svg"></a> <a href="https://pepstock-org.github.io/Charba-Wiki"><img alt="Documentation" src="https://img.shields.io/badge/static-Documentation-F27173.svg"></a> </p>What's Charba
GWT Web toolkit doesn't have charting library available out of the box.
There are some open source charting libraries for GWT available to be used but with some constraints or unclear items:
- internet connection needed
- open source license not completely clear, sometimes with some obligations like to add specific labels
- old packages not longer maintained
For all these reasons, Charba has been developed, leveraging on Chart.JS capabilities which are now available to GWT developers.
Not only GWT
Even if Charba was born only as GWT chart library, as of version 3, Charba has been changed in order to be used not only in GWT but also with other DOM frameworks, based on J2CL - JavaToClosure, like Google Elemental2 or Elemento.
Charba has got an own DOM manager which allows to it to be independent from any other DOM frameworks (i.e. GWT, Elemental2 or Elemento) but it is providing a set of hooks in order to use it also over those frameworks.
Building
To build Charba, you can check out the project and to run Ant build.xml.
The Ant build.xml is able to build the 2 artifacts, related to the 2 distributions available.
The first distribution is a Charba file without any GWT dependency (but working on GWT anyway), consumable also in other J2CL - JavaToClosure frameworks, like Google Elemental2 and Elemento.
To build the project, execute buildBinary target.
It creates a charba-[version.release].jar file in dist folder, ready to be included in your project.
The second distribution is a Charba file with a hard GWT dependency which contains charts widgets and code splitting capabilities.
To build the project, execute buildBinaryGwt target.
It creates a charba-[version.release]-gwt.jar file in dist folder, ready to be included in your project.
Installation
Currently Charba is available on MVN repository.
It is available also on GitHub releases.
If you are using Apache Maven:
<dependency>
<groupId>org.pepstock</groupId>
<artifactId>charba</artifactId>
<version>6.5</version>
<!-- for GWT -->
<version>6.5-gwt</version>
</dependency>
If you are using Apache Ivy:
<dependency org="org.pepstock" name="charba" rev="6.5"/>
<!-- for GWT -->
<dependency org="org.pepstock" name="charba" rev="6.5-gwt"/>
To install in your GWT project, both for GWT and for J2CL artifacts, you must the following configuration in your GWT project module configuration:
...
<inherits name="org.pepstock.charba.Charba"/>
...
Charba is based on JSINTEROP method to integrate java script objects.
As the name suggests, JsInterop is a way of interoperating Java with JavaScript. It offers a better way of communication between the two using annotations instead of having to write java script in your classes (using JSNI).
Gallery
<table> <tr> <td style="background-color: 'white' !important"> <a href="https://pepstock-org.github.io/Charba-Showcase/index.html?gallery=bar"> <img width="200px" src="https://raw.githubusercontent.com/pepstock-org/Charba-Wiki/master/static/img/galleryBar.png"/> </a> </td> <td style="background-color: white"> <a href="https://pepstock-org.github.io/Charba-Showcase/index.html?gallery=horizontalbar"> <img width="200px" src="https://raw.githubusercontent.com/pepstock-org/Charba-Wiki/master/static/img/galleryHorizontalBar.png"/> </a> </td> <td style="background-color: white"> <a href="https://pepstock-org.github.io/Charba-Showcase/index.html?gallery=line"> <img width="200px" src="https://raw.githubusercontent.com/pepstock-org/Charba-Wiki/master/static/img/galleryLine.png"/> </a> </td> <td style="background-color: white"> <a href="https://pepstock-org.github.io/Charba-Showcase/index.html?gallery=verticalline"> <img width="200px" src="https://raw.githubusercontent.com/pepstock-org/Charba-Wiki/master/static/img/galleryVerticalLine.png"/> </a> </td> </tr> <tr> <td align="center">Bar</td> <td align="center">Horizontal bar</td> <td align="center">Line</td> <td align="center">Vertical line</td> </tr> <tr> <td> <a href="https://pepstock-org.github.io/Charba-Showcase/index.html?gallery=scatter"> <img width="200px" src="https://raw.githubusercontent.com/pepstock-org/Charba-Wiki/master/static/img/galleryScatter.png"/> </a> </td> <td> <a href="https://pepstock-org.github.io/Charba-Showcase/index.html?gallery=doughnut"> <img width="200px" src="https://raw.githubusercontent.com/pepstock-org/Charba-Wiki/master/static/img/galleryDoughnut.png"/> </a> </td> <td> <a href="https://pepstock-org.github.io/Charba-Showcase/index.html?gallery=pie"> <img width="200px" src="https://raw.githubusercontent.com/pepstock-org/Charba-Wiki/master/static/img/galleryPie.png"/> </a> </td> <td> <a href="https://pepstock-org.github.io/Charba-Showcase/index.html?gallery=polararea"> <img width="200px" src="https://raw.githubusercontent.com/pepstock-org/Charba-Wiki/master/static/img/galleryPolarArea.png"/> </a> </td> </tr> <tr> <td align="center">Scatter</td> <td align="center">Doughnut</td> <td align="center">Pie</td> <td align="center">Polar area</td> </tr> <tr> <td> <a href="https://pepstock-org.github.io/Charba-Showcase/index.html?gallery=radar"> <img width="200px" src="https://raw.githubusercontent.com/pepstock-org/Charba-Wiki/master/static/img/galleryRadar.png"/> </a> </td> <td> <a href="https://pepstock-org.github.io/Charba-Showcase/index.html?gallery=bubble"> <img width="200px" src="https://raw.githubusercontent.com/pepstock-org/Charba-Wiki/master/static/img/galleryBubble.png"/> </a> </td> <td> <a href="https://pepstock-org.github.io/Charba-Showcase/index.html?gallery=timeseries"> <img width="200px" src="https://raw.githubusercontent.com/pepstock-org/Charba-Wiki/master/static/img/galleryTimeseries.png"/> </a> </td> <td> <a href="https://pepstock-org.github.io/Charba-Showcase/index.html?gallery=stacked"> <img width="200px" src="https://raw.githubusercontent.com/pepstock-org/Charba-Wiki/master/static/img/galleryStacked.png"/> </a> </td> </tr> <tr> <td align="center">Radar</td> <td align="center">Bubble</td> <td align="center">Time series</td> <td align="center">Stacked</td> </tr> <tr> <td> <a href="https://pepstock-org.github.io/Charba-Showcase/index.html?gallery=meter"> <img width="200px" src="https://raw.githubusercontent.com/pepstock-org/Charba-Wiki/master/static/img/galleryMeter.png"/> </a> </td> <td> <a href="https://pepstock-org.github.io/Charba-Showcase/index.html?gallery=gauge"> <img width="200px" src="https://raw.githubusercontent.com/pepstock-org/Charba-Wiki/master/static/img/galleryGauge.Related Skills
node-connect
342.5kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
85.3kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
342.5kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
342.5kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。


