{"id":30448313,"url":"https://github.com/xdev-software/vaadin-chartjs-wrapper","last_synced_at":"2025-08-23T12:06:40.045Z","repository":{"id":301118092,"uuid":"1007714565","full_name":"xdev-software/vaadin-chartjs-wrapper","owner":"xdev-software","description":"A Chart.js 4+ Wrapper for Vaadin","archived":false,"fork":false,"pushed_at":"2025-08-17T04:22:00.000Z","size":1545,"stargazers_count":5,"open_issues_count":3,"forks_count":0,"subscribers_count":0,"default_branch":"develop","last_synced_at":"2025-08-18T01:37:47.628Z","etag":null,"topics":["chart","chartjs","vaadin","vaadin-addon"],"latest_commit_sha":null,"homepage":"https://vaadin.com/directory/component/chartjs-wrapper-for-vaadin","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xdev-software.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-24T12:20:13.000Z","updated_at":"2025-08-11T03:32:45.000Z","dependencies_parsed_at":"2025-06-25T08:43:03.564Z","dependency_job_id":"4c270ad9-1bb3-4dee-9e38-3a520aaff2ee","html_url":"https://github.com/xdev-software/vaadin-chartjs-wrapper","commit_stats":null,"previous_names":["xdev-software/vaadin-chartjs"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/xdev-software/vaadin-chartjs-wrapper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xdev-software%2Fvaadin-chartjs-wrapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xdev-software%2Fvaadin-chartjs-wrapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xdev-software%2Fvaadin-chartjs-wrapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xdev-software%2Fvaadin-chartjs-wrapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xdev-software","download_url":"https://codeload.github.com/xdev-software/vaadin-chartjs-wrapper/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xdev-software%2Fvaadin-chartjs-wrapper/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271746907,"owners_count":24813594,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-23T02:00:09.327Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","chartjs","vaadin","vaadin-addon"],"created_at":"2025-08-23T12:06:39.533Z","updated_at":"2025-08-23T12:06:40.035Z","avatar_url":"https://github.com/xdev-software.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0?logo=vaadin)](https://vaadin.com/directory/component/chartjs-wrapper-for-vaadin)\n[![Latest version](https://img.shields.io/maven-central/v/software.xdev/vaadin-chartjs-wrapper?logo=apache%20maven)](https://mvnrepository.com/artifact/software.xdev/vaadin-chartjs-wrapper)\n[![Build](https://img.shields.io/github/actions/workflow/status/xdev-software/vaadin-chartjs-wrapper/check-build.yml?branch=develop)](https://github.com/xdev-software/vaadin-chartjs-wrapper/actions/workflows/check-build.yml?query=branch%3Adevelop)\n![Vaadin 24+](https://img.shields.io/badge/Vaadin%20Platform/Flow-24+-00b4f0)\n\n# \u003cimg src=\"https://www.chartjs.org/media/logo.svg\" height=\"38\" /\u003e Chart.js Wrapper for Vaadin\n\nA [Chart.js](https://www.chartjs.org/) 4+ Wrapper for Vaadin\n\n![demo](assets/demo.png)\n\n## Usage\n\nFor more and detailed usage examples please have a look at [the demo](./vaadin-chartjs-wrapper-demo/src/main/java/software/xdev/vaadin/chartjs/demo/).\n\n### Minimal\n\n```java\n// Assumes that this code is in some kind of Vaadin component or view\nChartContainer chart = new ChartContainer();\nthis.add(chart);\n\nchart.showChart(\n  \"{\\\"data\\\":{\\\"labels\\\":[\\\"A\\\",\\\"B\\\"],\\\"datasets\\\":[{\\\"data\\\":[1,2],\\\"label\\\":\\\"X\\\"}]},\\\"type\\\":\\\"bar\\\"}\");\n\n// Or utilizing chartjs-java-model\nchart.showChart(new BarChart(new BarData()\n  .addLabels(\"A\", \"B\")\n  .addDataset(new BarDataset()\n    .setLabel(\"X\")\n    .addData(1)\n    .addData(2)))\n  .toJson());\n```\n\n### Recommended\n\n1. 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).\u003cbr/\u003e\nOtherwise you have to write the JSON yourself.\n2. Optionally derive classes for your charts (from e.g. ``ChartContainer``) that also handle the data-to-JSON conversion logic.\u003cbr/\u003e\nTherefore you can encapsulate the components properly, for example like this: ``FetchFromBackendService.class → Model for chart → ChartContainer.class → Build JSON and show chart``\n\n\u003cdetails\u003e\u003csummary\u003eHere is a example how the code could look (click to expand)\u003c/summary\u003e\n\n1. Define a custom chart or use the ``showChart``-method directly.\u003cbr/\u003eExample:\n    ```java\n    public class ExampleChartContainer extends ChartContainer\n    {\n      public void show(Data data)\n      {\n        BarData data = ...; // Build the bar chart data from the handed over data\n        this.showChart(new BarChart(data)\n          .setOptions(new BarOptions()\n            .setResponsive(true)\n            .setMaintainAspectRatio(false)\n            .setPlugins(new Plugins()\n              .setTitle(new Title()\n                .setText(\"Age\")\n                .setDisplay(true))))\n          .toJson());\n      }\n    }\n    ```\n2. Add the chart to your view/component:\n    ```java\n    public class ExampleView extends VerticalLayout\n    {\n      private final ExampleChartContainer chart = new ExampleChartContainer();\n      \n      public ExampleView()\n      {\n        this.add(this.chart);\n        // ...\n      }\n      \n      private void loadDataAndShowChart()\n      {\n        this.chart.showLoading();\n        \n        UI ui = UI.getCurrent();\n        CompletableFuture.runAsync(() -\u003e {\n          try {\n            var data = ...; // Load some data from the backend\n            // You may also convert the data here and call showChart\n            ui.access(() -\u003e this.chart.show(data));\n          } catch (Exception ex) {\n            // Display the error message when loading fails\n            ui.access(() -\u003e this.chart.showFailed(ex.getMessage()));\n          }\n        });\n      }\t\n    }\n    ```\n\n\u003c/details\u003e\n\n## Installation\n[Installation guide for the latest release](https://github.com/xdev-software/vaadin-chartjs-wrapper/releases/latest#Installation)\n\n### Spring-Boot\n* You may have to include ``software/xdev`` inside [``vaadin.allowed-packages``](https://vaadin.com/docs/latest/integrations/spring/configuration#configure-the-scanning-of-packages)\n\n## Run the Demo\n* Checkout the repo\n* Run ``mvn install \u0026\u0026 mvn -f vaadin-chartjs-wrapper-demo spring-boot:run``\n* Open http://localhost:8080\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow example\u003c/summary\u003e\n  \n  ![demo](assets/demo.avif)\n\u003c/details\u003e\n\n## Support\nIf 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).\n\n## Contributing\nSee the [contributing guide](./CONTRIBUTING.md) for detailed instructions on how to get started with our project.\n\n## Dependencies and Licenses\nView the [license of the current project](LICENSE) or the [summary including all dependencies](https://xdev-software.github.io/vaadin-chartjs-wrapper/dependencies)\n\n\u003csub\u003eDisclaimer: This is not an official Chart.js product and not associated\u003c/sub\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxdev-software%2Fvaadin-chartjs-wrapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxdev-software%2Fvaadin-chartjs-wrapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxdev-software%2Fvaadin-chartjs-wrapper/lists"}