PHPackages maxodrom/yii2-chartjs-widget - 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. maxodrom/yii2-chartjs-widget ActiveYii2-extension[Utility & Helpers](/categories/utility) maxodrom/yii2-chartjs-widget ============================ ChartJs widget for Yii2. 05PHP Since Jun 27Pushed 1y agoCompare [ Source](https://github.com/maxodrom/yii2-chartjs-widget)[ Packagist](https://packagist.org/packages/maxodrom/yii2-chartjs-widget)[ RSS](/packages/maxodrom-yii2-chartjs-widget/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependenciesVersions (1)Used By (0) ChartJs Widget ============== [](#chartjs-widget) [![Latest Version](https://camo.githubusercontent.com/ebfa4c2335ea7f30d8698fa5e389a2143e902403f532e92e7f6fe81bd41b44e5/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f7461672f32616d69676f732f796969322d63686172746a732d7769646765742e7376673f7374796c653d666c61742d737175617265266c6162656c3d72656c65617365)](https://github.com/2amigos/yii2-chartjs-widget/tags)[![Software License](https://camo.githubusercontent.com/b60331a2084501dc07cf6d6964c0da58dd005d89c45cf3b28b4b22b60f5ec00f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4253442d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE.md)[![Build Status](https://camo.githubusercontent.com/845e09592f4c26d2934aee8578befdb4185c6e00641c6731bfa4e723be9fdddc/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f32616d69676f732f796969322d63686172746a732d7769646765742f6d61737465722e7376673f7374796c653d666c61742d737175617265)](https://travis-ci.org/2amigos/yii2-chartjs-widget)[![Coverage Status](https://camo.githubusercontent.com/70378d0d1205aa6213a36fe35e9f1d6e769c47b4407db6b9d76b420cba233b6f/68747470733a2f2f696d672e736869656c64732e696f2f7363727574696e697a65722f636f7665726167652f672f32616d69676f732f796969322d63686172746a732d7769646765742e7376673f7374796c653d666c61742d737175617265)](https://scrutinizer-ci.com/g/2amigos/yii2-chartjs-widget/code-structure)[![Quality Score](https://camo.githubusercontent.com/c2cf60a68e02ca6dc2509cd08437a3d13df6469464ddfdbb702cf911e53ab068/68747470733a2f2f696d672e736869656c64732e696f2f7363727574696e697a65722f672f32616d69676f732f796969322d63686172746a732d7769646765742e7376673f7374796c653d666c61742d737175617265)](https://scrutinizer-ci.com/g/2amigos/yii2-chartjs-widget)[![Total Downloads](https://camo.githubusercontent.com/47fa533aedbcf0d5162cf8af33a3ebb93bb4cae37e14c4165fedd41a16747320/68747470733a2f2f706f7365722e707567782e6f72672f32616d69676f732f796969322d63686172746a732d7769646765742f646f776e6c6f616473)](https://packagist.org/packages/2amigos/yii2-chartjs-widget)[![StyleCI](https://camo.githubusercontent.com/0e0dce5100898f51d1a0d4394398aa9721872d4539373445a30a02459ebb352a/68747470733a2f2f7374796c6563692e696f2f7265706f732f31363531353038342f736869656c643f6272616e63683d6d6173746572)](https://styleci.io/repos/16515084) Renders a [ChartJs plugin](http://www.chartjs.org/docs/) widget Installation ------------ [](#installation) The preferred way to install this extension is through [composer](http://getcomposer.org/download/). This requires the composer-asset-plugin, which is also a dependency for yii2 – so if you have yii2 installed, you are most likely already set. Either run ``` composer require maxodrom/yii2-chartjs-widget:dev-master ``` or add ``` "maxodrom/yii2-chartjs-widget": "dev-master" ``` to the require section of your application's `composer.json` file. Usage ----- [](#usage) The following types are supported: - Line - Bar - Radar - Polar - Pie - Doughnut - Bubble - Scatter - Area - Mixed The following example is using the `Line` type of chart. Please, check [ChartJs plugin](http://www.chartjs.org/docs/)documentation for the different types supported by the plugin. ``` use dosamigos\chartjs\ChartJs; ``` Plugins usage example (displaying percentages on the Pie Chart): ``` echo ChartJs::widget([ 'type' => 'pie', 'id' => 'structurePie', 'options' => [ 'height' => 200, 'width' => 400, ], 'data' => [ 'radius' => "90%", 'labels' => ['Label 1', 'Label 2', 'Label 3'], // Your labels 'datasets' => [ [ 'data' => ['35.6', '17.5', '46.9'], // Your dataset 'label' => '', 'backgroundColor' => [ '#ADC3FF', '#FF9A9A', 'rgba(190, 124, 145, 0.8)' ], 'borderColor' => [ '#fff', '#fff', '#fff' ], 'borderWidth' => 1, 'hoverBorderColor'=>["#999","#999","#999"], ], ], ], 'clientOptions' => [ 'legend' => [ 'display' => false, 'position' => 'bottom', 'labels' => [ 'fontSize' => 14, 'fontColor' => "#425062", ], ], 'tooltips' => [ 'enabled' => true, 'intersect' => true, ], 'hover' => [ 'mode' => false, ], 'maintainAspectRatio' => false, ], 'plugins' => new \yii\web\JsExpression(' [{ afterDatasetsDraw: function(chart, easing) { var ctx = chart.ctx; chart.data.datasets.forEach(function (dataset, i) { var meta = chart.getDatasetMeta(i); if (!meta.hidden) { meta.data.forEach(function(element, index) { // Draw the text in black, with the specified font ctx.fillStyle = 'rgb(0, 0, 0)'; var fontSize = 16; var fontStyle = 'normal'; var fontFamily = 'Helvetica'; ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily); // Just naively convert to string for now var dataString = dataset.data[index].toString()+'%'; // Make sure alignment settings are correct ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; var padding = 5; var position = element.tooltipPosition(); ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding); }); } }); } }]') ]) ``` Further Information ------------------- [](#further-information) ChartJs has lots of configuration options. For further information, please check the [ChartJs plugin](http://www.chartjs.org/docs/) website. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. Credits ------- [](#credits) - [Antonio Ramirez](https://github.com/tonydspaniard) - [All Contributors](../../contributors) License ------- [](#license) The BSD License (BSD). Please see [License File](LICENSE.md) for more information. > [![2amigOS!](https://camo.githubusercontent.com/9fd8f1de41dc23003bb2a54034cb6658dde5be97092e195a62d629d0d7fa7f6c/687474703a2f2f7777772e67726176617461722e636f6d2f6176617461722f35353336333339346437323934356666376564333132353536656330343165302e706e67)](http://www.2amigos.us) > *Custom Software | Web & Mobile Software Development* > [www.2amigos.us](https://2amigos.us) ### Health Score 15 — LowBetter than 3% of packages Maintenance27 Infrequent updates — may be unmaintained Popularity4 Limited adoption so far Community11 Small or concentrated contributor base Maturity18 Early-stage or recently created project Bus Factor2 2 contributors hold 50%+ of commits 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/9c79da7402e9376230130c590d274bfe4ffbe27e65c3584df4318bab3504371b?d=identicon)[mercium](/maintainers/mercium) --- Top Contributors [![maxodrom](https://avatars.githubusercontent.com/u/11097695?v=4)](https://github.com/maxodrom "maxodrom (3 commits)")[![tonydspaniard](https://avatars.githubusercontent.com/u/566016?v=4)](https://github.com/tonydspaniard "tonydspaniard (3 commits)")[![leon4m](https://avatars.githubusercontent.com/u/14853908?v=4)](https://github.com/leon4m "leon4m (1 commits)")[![pana1990](https://avatars.githubusercontent.com/u/6630197?v=4)](https://github.com/pana1990 "pana1990 (1 commits)")[![tsanchev](https://avatars.githubusercontent.com/u/8882098?v=4)](https://github.com/tsanchev "tsanchev (1 commits)") ### Embed Badge ![Health badge](/badges/maxodrom-yii2-chartjs-widget/health.svg) ``` [![Health](https://phpackages.com/badges/maxodrom-yii2-chartjs-widget/health.svg)](https://phpackages.com/packages/maxodrom-yii2-chartjs-widget) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)