PHPackages                             fados/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. fados/chartjs-bundle

ActiveSymfony-bundle[Utility & Helpers](/categories/utility)

fados/chartjs-bundle
====================

Chartjs integration in Symfony2

22.9k6[1 PRs](https://github.com/fados-produccions/ChartjsBundle/pulls)PHP

Since Oct 10Pushed 6y ago3 watchersCompare

[ Source](https://github.com/fados-produccions/ChartjsBundle)[ Packagist](https://packagist.org/packages/fados/chartjs-bundle)[ RSS](/packages/fados-chartjs-bundle/feed)WikiDiscussions master Synced 3d ago

READMEChangelog (1)DependenciesVersions (1)Used By (0)

ChartjsBundle
=============

[](#chartjsbundle)

Adding charts to symfony 2 using Chart.js 2.4.0

Symfony 2 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 fados/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 fados\ChartjsBundle\ChartjsBundle(),
```

Usage
-----

[](#usage)

Configure you config.yml 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

fados_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 (fados\\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 fados\\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

26

—

LowBetter than 43% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity22

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 98% 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.

### Community

Maintainers

![](https://www.gravatar.com/avatar/922e5a061e3dac12d94b8e913ca31c70822fb60310923ba346453f26604a03db?d=identicon)[ajuhe](/maintainers/ajuhe)

---

Top Contributors

[![albertjuhe](https://avatars.githubusercontent.com/u/5848928?v=4)](https://github.com/albertjuhe "albertjuhe (49 commits)")[![jjcotado](https://avatars.githubusercontent.com/u/17544029?v=4)](https://github.com/jjcotado "jjcotado (1 commits)")

### Embed Badge

![Health badge](/badges/fados-chartjs-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/fados-chartjs-bundle/health.svg)](https://phpackages.com/packages/fados-chartjs-bundle)
```

###  Alternatives

[niiknow/bayes

a machine learning lib

6950.0k](/packages/niiknow-bayes)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)