ereminmdev/yii2-chartjs

Yii2 widget for Chart.js library.

1.0.9 2024-12-20 03:00 UTC

Requires

• php: >=7.4
• npm-asset/chart.js: ^4.2
• npm-asset/chartjs-plugin-datalabels: ^2.2
• npm-asset/patternomaly: ^1.3
• yiisoft/yii2: ~2.0.1

MIT

• Michael Eremin

• javascript
• widget
• yii2
• chartjs

README

Yii2 widget for Chart.js library: https://www.chartjs.org/

Install

composer require --prefer-dist ereminmdev/yii2-chartjs

Documentation

https://www.chartjs.org/docs/latest/

Use

Insert widget into view:

<?= \ereminmdev\yii2\chartjs\ChartJs::widget([
    'id' => 'my_chart',
    'type' => 'bar',
    'data' => [...],
    'options' => [
        'scales' => [
            'y' => [
                'beginAtZero' => true,
            ],
        ],
        'plugins' => [
            'legend' => [
                'position' => 'bottom',
            ],
        ],
    ],
    'plugins' => [...],
]) ?>

Display labels on data for any type of charts:

ChartJsDataLabelsAsset::register($view);
$view->registerJs('Chart.register(ChartDataLabels);');

https://chartjs-plugin-datalabels.netlify.app/

Use patterns:

ChartJsPatternomalyAsset::register($this);

'data' => [
    'datasets' => [
            [
                'label' => '...',
                'data' => [...],
                'backgroundColor' => [new JsExpression("pattern.draw('diagonal-right-left', '#0b5ba5')")],
            ],

https://github.com/ashiguruma/patternomaly

Sample default settings:

Chart.defaults.plugins.datalabels.display = false;
Chart.defaults.font.family = 'Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif';
Chart.defaults.font.size = 11;
Chart.defaults.layout.padding = 0;
Chart.defaults.plugins.legend.align = 'start';
Chart.defaults.plugins.legend.labels.boxWidth = 12;