PHPackages practically/yii2-chartjs - 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. practically/yii2-chartjs ActiveLibrary practically/yii2-chartjs ======================== Chart js wrapper for yii2 to help with rendering data charts 1.5.0(1y ago)1155.5k↓34.3%4[1 issues](https://github.com/Practically/yii2-chartjs/issues)[1 PRs](https://github.com/Practically/yii2-chartjs/pulls)PHP Since Oct 9Pushed 1y ago3 watchersCompare [ Source](https://github.com/Practically/yii2-chartjs)[ Packagist](https://packagist.org/packages/practically/yii2-chartjs)[ RSS](/packages/practically-yii2-chartjs/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (9)Dependencies (5)Versions (12)Used By (0) Yii2 Chart JS ============= [](#yii2-chart-js) Wrapper for chart js in Yii2. Easily turn Yii2 querys into beautiful charts. Installation ------------ [](#installation) The preferred way is with composer. ``` composer require practically/yii2-chartjs ``` **Note:** This package does not handle the installation of chart js library. For that you can visit the [chart js website](http://www.chartjs.org/docs/latest/getting-started/installation.html) You can also install with the [asset packagist](https://asset-packagist.org/) ``` composer require bower-asset/chart-js ``` Chart JS Versions ----------------- [](#chart-js-versions) Please note that there are API changes in the `clientOptions` of the config for chart js between versions 2 and 3. We have documented the basic API for this library in the relevent sections of the docs. If you are updating to v3 you can find more info in the [Chart JS 3.x Migration Guide](https://www.chartjs.org/docs/latest/getting-started/v3-migration.html) There may be some changes in the way you import the Chat JS javascript depending on the way you have implemented it in your application. You can read more about integration on the [Chart JS Documentation](https://www.chartjs.org/docs/master/getting-started/integration.html) Usage ----- [](#usage) ### Basic usage [](#basic-usage) ``` use practically\chartjs\Chart; echo Chart::widget([ 'type' => Chart::TYPE_BAR, 'datasets' => [ [ 'data' => [ 'Label 1' => 10, 'Label 2' => 20, 'Label 3' => 30 ] ] ] ]); ``` ### Using a db query to define the data [](#using-a-db-query-to-define-the-data) ``` echo Chart::widget([ 'type' => Chart::TYPE_BAR, 'datasets' => [ [ 'query' => Model::find() ->select('type') ->addSelect('count(*) as data') ->groupBy('type') ->createCommand(), 'labelAttribute' => 'type' ] ] ]); ``` ### Using a db query with a scatter chart [](#using-a-db-query-with-a-scatter-chart) ``` echo Chart::widget([ 'type' => Chart::TYPE_SCATTER, 'datasets' => [ [ 'query' => Model::find() ->select('type') ->addSelect('sum(column_one) as x') ->addSelect('sum(column_two) as y') ->groupBy('type') ->createCommand(), 'labelAttribute' => 'type' ] ] ]); ``` ### Adding dom options [](#adding-dom-options) ``` echo Chart::widget([ ... 'options' => [ 'class' => 'chart', 'data-attribute' => 'my-value' ], ... ]); ``` ### Adding client options [](#adding-client-options) In the client options array you can define any property to be json encoded and passed to the chart js constructor. ``` echo Chart::widget([ ... 'clientOptions' => [ 'title' => [ 'display' => true, 'text' => 'My New Title', ], 'legend' => ['display' => false], ] ... ]); ``` ### Formatting the y axes [](#formatting-the-y-axes) Chart JS v2.x``` echo Chart::widget([ ... 'clientOptions' => [ 'scales' => [ 'yAxes' => [ [ 'ticks' => [ 'min' => 0, 'max' => 100, 'callback' => new JsExpression('function(value, index, values) { return \'£\'+value; }') ], 'scaleLabel' => [ 'display' => true, 'labelString' => 'Average (%)', ] ] ] ], 'tooltips' => [ 'callbacks' => [ 'label' => new JsExpression('function(tooltipItem, chart) { var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || \'\'; return datasetLabel + \' £\'+tooltipItem.yLabel; }') ] ] ] ... ]); ``` Chart JS v3.x``` echo Chart::widget([ ... 'clientOptions' => [ 'scales' => [ 'y' => [ 'min' => 0, 'max' => 100, 'title' => [ 'display' => true, 'text' => 'Average (%)', ], 'ticks' => [ 'callback' => new JsExpression('function(value, index, values) { return \'£\'+value; }') ] ] ], 'plugins' => [ 'tooltip' => [ 'callbacks' => [ 'label' => new JsExpression('function(context) { return \'£\'+context.chart.data.labels[context.dataIndex]; }') ] ] ] ] ... ]); ``` ### Adding chart js events [](#adding-chart-js-events) ``` Chart::widget([ 'type' => Chart::TYPE_DOUGHNUT, 'jsVar' => 'DoughnutChart', 'jsEvents' => [ 'onclick' => new JsExpression('function(e) { var el = DoughnutChart.getElementAtEvent(e); window.location.href = "/search/ + el[0]._model.label; }') ] ]); ``` Contributing ------------ [](#contributing) ### Getting set up [](#getting-set-up) Clone the repo and run `composer install`. Then start hacking! ### Testing [](#testing) All new features of bug fixes must be tested. Testing is with phpunit and can be run with the following command ``` composer run-script test ``` ### Coding Standards [](#coding-standards) This library uses psr2 coding standards and `squizlabs/php_codesniffer` for linting. There is a composer script for this: ``` composer run-script lint ``` ### Pull Requests [](#pull-requests) Before you create a pull request with you changes, the pre-commit script must pass. That can be run as follows: ``` composer run-script pre-commit ``` Credits ------- [](#credits) This package is created and maintained by [Practically.io](https://practically.io/) ### Health Score 43 — FairBetter than 91% of packages Maintenance35 Infrequent updates — may be unmaintained Popularity38 Limited adoption so far Community15 Small or concentrated contributor base Maturity68 Established project with proven stability Bus Factor1 Top contributor holds 52.7% 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 ~275 days Recently: every ~60 days Total 9 Last Release 572d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/14832454?v=4)[Ade Attwood](/maintainers/AdeAttwood)[@AdeAttwood](https://github.com/AdeAttwood) --- Top Contributors [![gwynbox](https://avatars.githubusercontent.com/u/1845763?v=4)](https://github.com/gwynbox "gwynbox (29 commits)")[![AdeAttwood](https://avatars.githubusercontent.com/u/14832454?v=4)](https://github.com/AdeAttwood "AdeAttwood (23 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)")[![GeorgeCadwallader](https://avatars.githubusercontent.com/u/43043359?v=4)](https://github.com/GeorgeCadwallader "GeorgeCadwallader (1 commits)") ### Code Quality Static AnalysisPsalm Code StylePHP\_CodeSniffer Type Coverage Yes ### Embed Badge ![Health badge](/badges/practically-yii2-chartjs/health.svg) ``` [![Health](https://phpackages.com/badges/practically-yii2-chartjs/health.svg)](https://phpackages.com/packages/practically-yii2-chartjs) ``` ### Alternatives [craftcms/cms Craft CMS 3.6k3.6M2.6k](/packages/craftcms-cms) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)