PHPackages neoacevedo/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. neoacevedo/yii2-chartjs-widget ActiveYii2-extension[Utility & Helpers](/categories/utility) neoacevedo/yii2-chartjs-widget ============================== ChartJs widget for Yii2. 0721PHP Since Jul 9Pushed 11mo agoCompare [ Source](https://github.com/neoacevedo/yii2-chartjs-widget)[ Packagist](https://packagist.org/packages/neoacevedo/yii2-chartjs-widget)[ RSS](/packages/neoacevedo-yii2-chartjs-widget/feed)WikiDiscussions main Synced 3w ago READMEChangelogDependenciesVersions (1)Used By (1) ChartJs Widget ============== [](#chartjs-widget) > **Este paquete es un fork de [2amigos/yii2-chartjs-widget](https://github.com/2amigos/yii2-chartjs-widget), el cual se encuentra en modo de solo lectura. Este fork fue creado para mantener vivo el paquete y continuar su mantenimiento.** [![Latest Stable Version](https://camo.githubusercontent.com/10dd0b5943c2322ddae800ef6d93145036cf7f8ff15a83a6981b6ac13c50e9c0/687474703a2f2f706f7365722e707567782e6f72672f6e656f6163657665646f2f796969322d63686172746a732d7769646765742f76)](https://packagist.org/packages/neoacevedo/yii2-chartjs-widget) [![Total Downloads](https://camo.githubusercontent.com/35e320c3ebad06de59a8bbdbb38dbde35e44fe746ced6e2512dd8982b7ea0581/687474703a2f2f706f7365722e707567782e6f72672f6e656f6163657665646f2f796969322d63686172746a732d7769646765742f646f776e6c6f616473)](https://packagist.org/packages/neoacevedo/yii2-chartjs-widget) [![Latest Unstable Version](https://camo.githubusercontent.com/57b5dc4c419c3c9e8e82e7389324600acdb1eac85a6aaf37467767b5ad116c48/687474703a2f2f706f7365722e707567782e6f72672f6e656f6163657665646f2f796969322d63686172746a732d7769646765742f762f756e737461626c65)](https://packagist.org/packages/neoacevedo/yii2-chartjs-widget) [![License](https://camo.githubusercontent.com/d3a1b6c41c6783bf60978757678729dc67605cf2cb5757b280ddbde68dde8d66/687474703a2f2f706f7365722e707567782e6f72672f6e656f6163657665646f2f796969322d63686172746a732d7769646765742f6c6963656e7365)](https://packagist.org/packages/neoacevedo/yii2-chartjs-widget) [![PHP Version Require](https://camo.githubusercontent.com/55058fc9af7ec1c6fc11d851b697f598253dbe418f98e3ee7c57d27ddee02d2c/687474703a2f2f706f7365722e707567782e6f72672f6e656f6163657665646f2f796969322d63686172746a732d7769646765742f726571756972652f706870)](https://packagist.org/packages/neoacevedo/yii2-chartjs-widget) 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 neoacevedo/yii2-chartjs-widget:dev-main ``` or add ``` "neoacevedo/yii2-chartjs-widget" : "dev-main" ``` 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 19 — LowBetter than 9% of packages Maintenance37 Infrequent updates — may be unmaintained Popularity12 Limited adoption so far Community13 Small or concentrated contributor base Maturity14 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/b76225f409e42b614d01e1788da075062004de1026d75051db8664e071199cc2?d=identicon)[neoacevedo](/maintainers/neoacevedo) --- Top Contributors [![tonydspaniard](https://avatars.githubusercontent.com/u/566016?v=4)](https://github.com/tonydspaniard "tonydspaniard (3 commits)")[![neoacevedo](https://avatars.githubusercontent.com/u/438372?v=4)](https://github.com/neoacevedo "neoacevedo (2 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/neoacevedo-yii2-chartjs-widget/health.svg) ``` [![Health](https://phpackages.com/badges/neoacevedo-yii2-chartjs-widget/health.svg)](https://phpackages.com/packages/neoacevedo-yii2-chartjs-widget) ``` ### Alternatives [symfony/webpack-encore-bundle Integration of your Symfony app with Webpack Encore 95265.7M610](/packages/symfony-webpack-encore-bundle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)