PHPackages aldaflux/chartjs-bundle - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. aldaflux/chartjs-bundle ActiveSymfony-bundle[Utility & Helpers](/categories/utility) aldaflux/chartjs-bundle ======================= Chartjs integration in Symfony5 v1.2.2(5y ago)01891MITPHP Since Mar 14Pushed 5y agoCompare [ Source](https://github.com/AlDaFlux/ChartjsBundle)[ Packagist](https://packagist.org/packages/aldaflux/chartjs-bundle)[ Docs](https://github.com/Aldaflux-produccions/ChartjsBundle)[ RSS](/packages/aldaflux-chartjs-bundle/feed)WikiDiscussions master Synced 5d ago READMEChangelogDependencies (2)Versions (5)Used By (0) ChartjsBundle ============= [](#chartjsbundle) forked from the excellent (Symfony2 / Symfony 3), and now compatible for symfony 5 Symfony 5 Bundle that allow us to add charts in our projects, using [Chart.js 2.4.0](http://www.chartjs.org/) library. How to use it ------------- [](#how-to-use-it) Install ------- [](#install) ``` composer require aldaflux/chartjs-bundle dev-master ``` This command requires you to have Composer installed globally, as explained in the installation chapter of the Composer documentation. Then, enable the bundle by adding the following line in the app/AppKernel.php file of your project ``` new Aldaflux\ChartjsBundle\ChartjsBundle(), ``` Usage ----- [](#usage) Configure you config/packages/aldaflux\_chartjs.yaml with: ``` chartjs: animation: duration: 1000 easing: easeOutQuart layout: padding: 0 legend: display: true position: 'top' fullWidth: true reverse: false labels: boxWidth: 40 fontSize: 12 fontStyle: 'normal' fontColor: '#666' fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" padding: 10 usePointStyle: false title: display: false position: 'top' fontSize: 12 fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" fontColor: '#666' fontStyle: 'bold' padding: 10 text: '' ``` This configuration is for the global [configuration of Chartjs](http://www.chartjs.org/docs/latest/configuration/). Register the routing in `app/config/routing.yml`: ``` # app/config/routing.yml Aldaflux_chartjs: resource: "@ChartjsBundle/Resources/config/routing.xml" ``` The routing file only have Charts samples [http://localhost/xxx/web/app\_dev.php/testchart/mainTest](http://localhost/xxx/web/app_dev.php/testchart/mainTest) Publish the assets: $ php app/console assets:install web Add the required stylesheet and javascripts to your layout: jquery on top (jquery library isn't in the assets, you have to add downloading from ): ``` ``` Chart.js Javascript: ``` ``` You could only add the javascript or use an extension twig, in the template where you wish to display the Chart, add the following twig: ``` {{ chartjs_canvas('myPieChart',graphica.width,graphica.height,graphica) }} ``` The first parameter is the Canvas id, its mandatory and must be unique, canvas Width, anvas Height and an array, graphicChart, with an special structure. Array structure for building charts (Aldaflux\\ChartjsBundle\\Model\\ChartBuiderData). Sample: ``` $graphicChart = new ChartBuiderData(); $graphicChart->setType(TypeCharjs::CHARJS_BAR); $graphicChart->setLabels(array('Barcelona','New York','Londres','Paris','Berlin','Tokio','El Cairo')); $graphicChart->setData( array( 'Profit' => array(23,45,65,12,34,45,88), 'Cost' => array(13,34,54,11,34,35,48), ) ); $graphicChart->setBackgroundcolor( array( TypeColors::aqua, TypeColors::dark_green ) ); $graphicChart->setBordercolor( array( TypeColors::aqua, TypeColors::dark_green ) ); $graphicChart->getHeight('150px'); $graphicChart->getWidth('500px'); $grafica->setOptions(" animation: { duration: 0, // general animation time }, hover: { animationDuration: 0, // duration of animations when hovering an item }, responsiveAnimationDuration: 0, // animation duration after a resize" ); $grafica->setDatasetConfig(' pointStyle: \'star\', '); ``` Controller will be: ``` public function barAction() { $grafica = new ChartBuiderData(); $grafica->setType(TypeCharjs::CHARJS_BAR); $grafica->setLabels(array('Barcelona','New York','Londres','Paris','Berlin','Tokio','El Cairo')); $grafica->setData( array( 'Profit' => array(23,45,65,12,34,45,88), 'Cost' => array(13,34,54,11,34,35,48), )); $grafica->setBackgroundcolor( array( TypeColors::aqua, TypeColors::dark_green ) ); $grafica->setBordercolor( array( TypeColors::aqua, TypeColors::dark_green ) ); $grafica->setHeight('150px'); $grafica->setWidth('500px'); $grafica->setTitle('Sample Charjs Bar'); return $this->render('ChartjsBundle:test:testChart.html.twig',array('grafica'=>$grafica,'title'=>$grafica->getTitle())); } ``` There are a couple of help classes related to colors and Charts type: ChartsType: Define the Charts that you can render: ``` CHARJS_BAR = 'bar'; CHARJS_HORIZONTALBAR = 'horizontalBar'; CHARJS_RADAR = 'radar'; CHARJS_LINE = 'line'; CHARJS_PIE = 'pie'; CHARJS_DOUGHNUT = 'doughnut'; CHARJS_POLAR_AREA = 'polarArea'; ``` TypeColors: Define colors, over 250 ``` maroon = '128,0,0'; dark_red = '139,0,0'; brown = '165,42,42'; firebrick = '178,34,34'; crimson = '220,20,60'; red = '255,0,0'; tomato = '255,99,71'; coral = '255,127,80'; indian_red = '205,92,92'; light_coral = '240,128,128'; dark_salmon = '233,150,122'; salmon = '250,128,114'; light_salmon = '255,160,122'; orange_red = '255,69,0'; dark_orange = '255,140,0'; orange = '255,165,0'; gold = '255,215,0'; ... ``` You Could build this array by hand or using a service transformer $grafica = $this->get('app.chartjs.transformer\_char'), this service, transform database data to an Array data, prepared to be rendered by Chart.js: ``` public function transform($type,$data,$fieldLabels,$fieldKpi,$options,$fieldData); ``` Sample: ``` $grafica = $this->get('app.chartjs.transformer_char')->transform(TypeCharjs::CHARJS_PIE,$data,'kpi','zone',$options,'average')->toArray(); ``` This service has several parameters: Type of chart: $type => TypeCharjs::CHARJS\_BAR (use Aldaflux\\ChartjsBundle\\Utils\\TypeCharjs;) Database Data ``` $data=> 0 = {array} [4] zone = "Europe" kpi = "Number of NIUs" average = "1250" 1 = {array} [4] zone = "Asia" kpi = "Number of NIUs" average = "1225" 2 = {array} [4] zone = "Africa" kpi = "Number of NIUs" average = "1235" } ``` Labels in the Chrart: ``` $fieldLabels => 'zone' ``` Indicator field: ``` $fieldKpi => 'kpi' ``` Value Field: ``` $fieldData => 'average' ``` Chartjs options: ``` $options => graphic options ``` This transform will converto to this structure of array: ``` $result {array} [2] labels = {array}[3] [0] = Europe [1] = Asia [2] = Africa data = {array}[1] Number of NIUs = {array}[3] [0] = 1250 [1] = 1225 [2] = 1235 ``` Twig sample ----------- [](#twig-sample) ``` {% extends 'AppBundle:Default:index.html.twig' %} {% block title %}Sample Chart{% endblock %} {% block javascript-head %} {{ parent() }} {% endblock %} {% block contingut %} Chart {{ title }} {{ chartjs_canvas('mychar1',grafica.width,grafica.height,grafica) }} {% endblock %} {% block javascript %} {{ parent() }} {% endblock %} ``` ### Health Score 27 — LowBetter than 49% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity11 Limited adoption so far Community7 Small or concentrated contributor base Maturity59 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~65 days Total 4 Last Release 2057d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/5a9e1a84963980fb40b742b359a1dfebce0e7f04abbb06d55188e3001fcdc659?d=identicon)[AntoineInDa](/maintainers/AntoineInDa) --- Top Contributors [![AlDaFlux](https://avatars.githubusercontent.com/u/32897236?v=4)](https://github.com/AlDaFlux "AlDaFlux (1 commits)") --- Tags chartjs ### Embed Badge ![Health badge](/badges/aldaflux-chartjs-bundle/health.svg) ``` [![Health](https://phpackages.com/badges/aldaflux-chartjs-bundle/health.svg)](https://phpackages.com/packages/aldaflux-chartjs-bundle) ``` ### Alternatives [netgen/layouts-core Netgen Layouts enables you to build and manage complex web pages in a simpler way and with less coding. This is the core of Netgen Layouts, its heart and soul. 3689.4k10](/packages/netgen-layouts-core)[icehouse-ventures/laravel-chartjs Simple package to facilitate and automate the use of charts in Laravel using the Chart.js library 117186.4k](/packages/icehouse-ventures-laravel-chartjs)[laravel-admin-ext/chartjs Use Chartjs in laravel-admin 102180.6k1](/packages/laravel-admin-ext-chartjs)[kirschbaum-development/nova-chartjs chart.js Chart Field for Laravel Nova 5140.5k](/packages/kirschbaum-development-nova-chartjs)[laravel-enso/charts Server-side data builder for Chart.js, with a VueJS component for the frontend. 1761.1k7](/packages/laravel-enso-charts)[halfpastfouram/phpchartjs PHP library for ChartJS 2512.2k](/packages/halfpastfouram-phpchartjs) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)