When registering clientScript the default context is View::POS_READY, that wraps all the javascript in a jquery function and makes it inaccesible.

If you are rendering many views in a component with renderPartial you will not be able to access javascript chart object in the browser..

Changing it to View::POS_END can solve this problem.
Or maybe adding a parameter to change script position on demand.

   public function colorsRand($data){

        $keys = array_keys($data);

        for( $i=0 ; $i < count($keys) ; $i++ )
        {
            $keys[$i] = "rgb(" . rand(100, 200) . "," . rand(100, 200) . "," . rand(100, 200) . ")";
        }
        return $keys;
    }

its randomization if no color init. $data - is array values

ChartJs::widget([
            'type' => 'pie',
            'options' => [
                'id' => 'mychart',
                'class' => 'chartContainer-'.Yii::$app->security->generateRandomString(rand(5,10)),
                'height' => 100,
                'width' => 200
            ],
            'data' => [
                'labels' => $labels,
                'datasets' => [
                    [
                        'label' => "My First dataset",
                        'backgroundColor' => $this->colorsRand($data),
                        'data' => $data
                    ],
                ]
            ]

        ]);

I have this bar chart, just a standard one and I want to modify how yAxes labels are showing without decimals, however I have this weird thing going on. Here's my config options. Can you explain why is this happening & what is the possible workaround for this? Thank you.

'clientOptions' => [
                    'scales' => [
                        'yAxes' => [[
                            'ticks' => [
                                'beginAtZero' => 'true', # Works
                                'callback' => function($label, $index, $labels) { // Breaks.
                                    if (floor($label) === $label) return $label;
                                }
                                # Console : TypeError: ({}) is not a function[Learn More] ???
                                # Errors  : TypeError: element._view is undefined ???
                            ]
                        ]],
                    ],
                ], 

properties change in version 2 of ChartJS, the correction should be performed in the README to avoid confusion.

datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(179,181,198,0.2)",
            borderColor: "rgba(179,181,198,1)",
            pointBackgroundColor: "rgba(179,181,198,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(179,181,198,1)",
            data: [65, 59, 90, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            pointBackgroundColor: "rgba(255,99,132,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(255,99,132,1)",
            data: [28, 48, 40, 19, 96, 27, 100]
        }
    ]

Setting unknown property: dosamigos\chartjs\ChartJs::plugins by PieChart

in the Chart class there is no attribute named plugins, but in the documentation there is an example with "plugins".

any idea??

Hello,

Do you have a example of code to customize a legend in this new version ?

great job
thz

Changing the values of height and width on options is not working.
The chart always expands to 100%

Please help. Thanks.

They dropped bower support, see chartjs/Chart.js@c631874

I am also creating an issue there.

Hello,

Could you change your code to see the legend ?

Thank

can you set "Chart.defaults.global" ?

Hi, thanks for the plugin. I have installed it via the composer. Now when I am trying to view a basic sample of the chart. It's giving me an error.

ChartJs::widget([ 'type' => 'line', 'options' => [ 'height' => 400, 'width' => 400 ], 'data' => [ 'labels' => ["January", "February", "March", "April", "May", "June", "July"], 'datasets' => [ [ 'label' => "My First dataset", 'backgroundColor' => "rgba(179,181,198,0.2)", 'borderColor' => "rgba(179,181,198,1)", 'pointBackgroundColor' => "rgba(179,181,198,1)", 'pointBorderColor' => "#fff", 'pointHoverBackgroundColor' => "#fff", 'pointHoverBorderColor' => "rgba(179,181,198,1)", 'data' => [65, 59, 90, 81, 56, 55, 40] ], [ 'label' => "My Second dataset", 'backgroundColor' => "rgba(255,99,132,0.2)", 'borderColor' => "rgba(255,99,132,1)", 'pointBackgroundColor' => "rgba(255,99,132,1)", 'pointBorderColor' => "#fff", 'pointHoverBackgroundColor' => "#fff", 'pointHoverBorderColor' => "rgba(255,99,132,1)", 'data' => [28, 48, 40, 19, 96, 27, 100] ] ] ] ]);

Error

The file or directory to be published does not exist: F:\xampp\htdocs\mdc/vendor\bower/chartjs/dist

Note: I am using yii2

I got error, when i tried to Install , this Widget.

Problem 1
- Installation request for 2amigos/yii2-chartjs-widget dev-master -> satisfiable by 2amigos/yii2-chartjs-widget[dev-master].
- 2amigos/yii2-chartjs-widget dev-master requires bower-asset/chartjs 1.0.2 -> no matching package found.

Potential causes:

• A typo in the package name
• The package is not available in a stable-enough version according to your minimum-stability setting
  see https://groups.google.com/d/topic/composer-dev/_g3ASeIFlrc/discussion for more details.

Read https://getcomposer.org/doc/articles/troubleshooting.md for further common problems.

How do I solve this problem?

Any chance to get something like chartjs-plugin-annotation bundled with yii2-chartjs-widget?
Thank you!

EDIT:
For those who needs this, I've already achieved this by:

• requiring "bower-asset/chartjs-plugin-annotation": "*", in composer.json
• inheriting AssetBundle to ChartJsAnnotationAsset (see ChartJsAsset.php)
• calling ChartJsAnnotationAsset::register($this); in the target view

Hi,
First of all I would like to say thank you for this useful widget.
There is a tiny problem in you example. It seems that you are using JSON instead of PHP array.

Here is my fix:

<?= ChartJs::widget([
    'type' => 'line',
    'options' => [
        'height' => 400,
        'width' => 400
    ],
    'data' => [
        'labels' => ["January", "February", "March", "April", "May", "June", "July"],
        'datasets' => [
            [
                'label' => "My First dataset",
                'backgroundColor' => "rgba(179,181,198,0.2)",
                'borderColor' => "rgba(179,181,198,1)",
                'pointBackgroundColor' => "rgba(179,181,198,1)",
                'pointBorderColor' => "#fff",
                'pointHoverBackgroundColor' => "#fff",
                'pointHoverBorderColor' => "rgba(179,181,198,1)",
                'data' => [65, 59, 90, 81, 56, 55, 40]
            ],
            [
                'label' => "My Second dataset",
                'backgroundColor' => "rgba(255,99,132,0.2)",
                'borderColor' => "rgba(255,99,132,1)",
                'pointBackgroundColor' => "rgba(255,99,132,1)",
                'pointBorderColor' => "#fff",
                'pointHoverBackgroundColor' => "#fff",
                'pointHoverBorderColor' => "rgba(255,99,132,1)",
                'data' => [28, 48, 40, 19, 96, 27, 100]
            ]
        ]
    ]
]);
?>

I'm trying to add onClick function on chart but it throws error
Setting unknown property: dosamigos\chartjs\ChartJs::jsVar

Here is code,
ChartJs::widget([
'type' => 'bar',
'jsVar' => 'BarChart',
'jsEvents' => [
'onclick' => new JsExpression('function(e) {
var activePoints = BarChart.getElementsAtEvent(e);
if (activePoints !== undefined && activePoints[0] !== undefined && activePoints[0]._index !== undefined) {
var selectedIndex = activePoints[0]._index;
console.log(this.data.labels[selectedIndex]);
}
}')
],
......

How can i change the point style in the tooltip? Or how can i disable this one?

return ChartJs::widget([ 'type' => 'line', 'id' => 'durations', 'options' => [ 'maintainAspectRatio'=> false, 'responsive' => true, 'plugins' => [ 'tooltip' => [ 'usePointStyle' => false, ], ] ],
This is my code like the infos from chart.js website. But this not will working with the widget. I hope anybody can help me.

ChartJsAsset lacks of next dependency

public $depends => [
  'yii\web\JqueryAsset',
],

Hi, I've just installed your great plugin via composer! Using "composer require 2amigos/yii2-chartjs-widget:~2.0" (maybe the error should be also in the main page of plugin, where there's wrote version ~2.0) and it was installed correctly. I've try to put your demo code to display a first chart just for example, but it doesn't work :( (I've also tried with "2amigos/yii2-chartjs-widget": "dev-master").

but if I visit the page I got this error:

I've read in the other topics that is should fixed on new version 3.0, but I don't care why doesn't work :( #44
Could you kindly help me please?
The only way I found to got it working is follow this reply to that issue: #44 (comment)

Many thanks & best regards,
Chris

How to display the legends in doughnut and shows the value without hovering the mouse?

In the latest release dev-master charts js no more includes the dist folder, so an error is thrown when using the widget:

Invalid Argument – yii\base\InvalidArgumentException
The file or directory to be published does not exist: /shared/httpd/project/vendor/bower-asset/chartjs/dist

options as it is in the example should be clientOptions as it is in the ChartJs.php

After upgrade chartjs to latest version I have problem with defining width and height of chart.

$chart = ChartJs::widget([ 'type' => 'doughnut', 'options' => [ 'id' => 'cstat', 'cutoutPercentage' => 25, 'legend' => [ 'display' => false], 'height' => 150, 'width' => 150 ], 'data' => $dt, ]);

I see that options: cutoutPercentage, height, width not works. Is there any problems or I have to do it in other way?

Hi guys,

how can I integrate/use this plugin?

I try

Chart.plugins.register(ChartDataLabels);

at the end of the code (asset already registered). but I get

Uncaught ReferenceError: Chart is not defined

:-/

Hi,
I need to test some functionalities provided in the master branch of chart.js library.
As I see in the yii2-chartjs-widget master branch, the composer file it is pointing to a specific release (1.0.2). I think this master branch should be using * and let the developer decide to specify a version (or not).
If you make a release of this extension you could use the specified version (or not) but master should be using *. It is the development branch.

What do you think about this approach? Do you think it make sense?

Hi everybody,

how can i add a text in the middle of a doughnut? I think i must do this with plugins, but don't know how the best practice.

Now i found a solution. You should really read the documentation first :-)

It works fine. But if i have a doughnut with a legend left or right, the text always shown in the middle of the canvas, but not in the middle of the doughnut.

This is my code:

` 'plugins' =>

                new \yii\web\JsExpression('
                [{
                    id: \'text\',
                    beforeDraw: function(chart, a, b) {
                        var width = chart.width,
                        height = chart.height,
                        ctx = chart.ctx;
                        ctx.restore();
                        var fontSize = (height / 50).toFixed(2);
                        ctx.font = fontSize + "em sans-serif";
                        ctx.textBaseline = "middle";
                        ctx.fillStyle ="rgb(200,200,200)";
            
                        var text = "'.$numVal.'",
                        textX = Math.round((width - ctx.measureText(text).width) / 2),
                        textY = height / 2;
            
                        ctx.fillText(text, textX, textY);
                        ctx.save();
                    }
                }]'),                

`

I hope ones of you has a tip for me.

Thanks very much...

How can i use this plugin without layout rendering?
My data loads by ajax and renderPartial in controller.

If i use thi plug in normal mode(default render) - all is ok!

Hi,

In line 96 I put this:
$js .= "document.getElementById('chartLegend_{$id}').innerHTML = chartJS_{$id}.generateLegend();";

and i view this:

and I see the legend. Can you do this in your version?

Hi guys,
Are you planning any updates to chartjs version? The difference is quite big at the moment

Hello,
is it possible to access the Chart from different script?

I would like to add checkboxes to show/hide datasets in multiple dataset pie.

I can see that in registerClientScript() there is initialization of the Chart chartJS_{$id} = new Chart($('#{$id}'),{$config});,
I can see in my app, that it is filled with chartJS_w3,
but when I try to use it I get an error Uncaught ReferenceError: chartJS_w3 is not defined.

This is my code:

<script>
        function updateChart(data) {
            console.log(chartJS_w3);
            const isDataShown = chartJS_w3.isDatasetVisible(data.value);
            if (isDataShown === true) {
                chartJS_w3.hide(data.value);
            }
            if (isDataShown === false) {
                chartJS_w3.show(data.value);
            }
        }
</script>

I found something similar to what I need at different package

You can access the JavaScript chart object from another script like this:
var chart = $('#my-chart-id').highcharts();

This bower is still available ?

I'm trying to view the chart title by setting the following options

'Legend' => [
'Display' => false
]
'Title' => [
'display' => true,
'text' => 'COST OF SERVICES',
'Position' => 'bottom'
]

but it does not work

see yiisoft/yii2#10151 (comment) for details

Hello, can this widget loaded with Pjax feature? i want add a custom filter, so the chart will be changed based on my click button.

Thanks..

Getting the error
No valid bower.json was found in any branch or tag of https://github.com/nnnick/Chart.js.git, could not load a package from it.
on composer update.
I think chartjs version
"bower-asset/chartjs": "~2.6"
as in your composer.json is no longer available from bower.
https://github.com/chartjs/Chart.js

I can't make callbacks for tooltips...

Any can help?

options: {            
        tooltips: {
            callbacks: {
                label: function(tooltipItems, data) {
                    return data.datasets[tooltipItems.datasetIndex].label +': ' + tooltipItems.yLabel + ' €';
                }
            }

        }
    }`

How can I use data from my MySQL database to create a chart?

Hi, thanks for your plugin. I am having some problems configuring my chart options. I am doing a chart with multiple datasets. The first is a bar chart and then on each bar I need to display a data point, see attached image. I display the points as the second dataset with 'type' => 'line'. The problem i am having is that I want to configure the line dataset differently than the bar chart, specifically I want to disable tooltips for the bar chart and only enable them for the line chart. I can disable for both using `clientOptions' but I can't seem to disable them individually. See example below. Any suggestions on configuring options for multiple datasets?

'type' => 'bar',
        'options' => [
            'height' => 400,
            'width' => 400
        ],
        'clientOptions' => [
            'title' => [
                'display' => true,
                'fontColor' => $domain->primary_color,
                'fontSize' => 20,
                'text' => $domain->name,
                'position' => 'top'
            ],
            'legend' => [
                'display' => false,
                'position' => 'bottom'
            ],
            'scales' => [
                'yAxes' => [[
                    'ticks' => [
                        'min' => 0,
                        'suggestedMax' => 5
                    ]]
                ]
            ],
            'tooltips' => [  
                    'enabled' => true // <-- This works, but for both datasets   
            ]
        ],
        'data' => [
            'labels' => $labels,
            'datasets' => [
                [
                    'label' => "Bar Chart label",
                    'backgroundColor' => $domain->barColor(),
                    'borderColor' => $domain['primary_color'],
                    'pointBackgroundColor' => "rgba(179,181,198,1)",
                    'pointBorderColor' => "#fff",
                    'pointHoverBackgroundColor' => "#fff",
                    'pointHoverBorderColor' => "rgba(179,181,198,1)",
                    'data' => $data,
                    'tooltips' => [  
                        'enabled' => true // <-- This works, but for both datasets   
                    ]
                ],
                [
                    'label' => 'Marker label',
                    'type' => 'line',
                    'data' => $markers,
                    'pointRadius' => 6,
                    'showLine' => false,
                    'pointStyle' => 'point',
                    'pointBackgroundColor' => "rgb(0,0,0)",
                    'tooltips' => [
                        'enabled' => true // When I try to set options here they don't take effect
                    ]
                ]
            ]
        ]

This is what I am trying to achieve.

What I got so far, the tooltip does not line up with the point and it show both the labels, I just want the Marker label and it to only appear when hovering over the marker.

Hi,
How can I set legend options like?

legend:{
display: true,
position: 'bottom',
fullWidth:true,
labels:{
boxWidth:30 //Width legend colorbox
}
}

Cannot create stacked bar as in https://codepen.io/Karl53/pen/MbYrPN?editors=0010

Hi, Im getting a "Failed to create chart: can't acquire context from the given item" error when using the widget in a pjax container, when the container is refreshed the error appears. This is happening in Firefox, in Chrome works ok.

Hi,

My chart is not showing on my view screen. There is a space where the chart should show but it doesn't.

In my script I also have a Highchart chart working.

• Andrew

<?php

use yii\helpers\Html;
use dosamigos\chartjs\ChartJs;
use miloschuman\highcharts\Highcharts;

?>

<div class="contract-index">
    <?= Highcharts::widget([
            'options' => [
                'chart' => ['type' => 'bar'],
               'title' => ['text' => 'Fruit Consumption'],
               'xAxis' => [
                  'categories' => ['Apples', 'Bananas', 'Oranges']
               ],
               'yAxis' => [
                  'title' => ['text' => 'Fruit eaten']
               ],
               'series' => [
                  ['name' => 'Jane', 'data' => [1, 0, 4]],
                  ['name' => 'John', 'data' => [5, 7, 3]]
               ]
            ]
    ]); ?>   
    
    
    <?= ChartJs::widget([ 'type' => 'Line', 'options' => 
                        [ 'height' => 400, 'width' => 400 ], 
                        'data' => 
                            [ 'labels' => ["January", "February", "March", "April", "May", "June", "July"], 
                                'datasets' => [ 
                                    [   'fillColor' => "rgba(220,220,220,0.5)", 
                                        'strokeColor' => "rgba(220,220,220,1)", 
                                        'pointColor' => "rgba(220,220,220,1)", 
                                        'pointStrokeColor' => "#fff", 'data' => [65, 59, 90, 81, 56, 55, 40] ], 
                                    [ 'fillColor' => "rgba(151,187,205,0.5)", 
                                      'strokeColor' => "rgba(151,187,205,1)", 
                                      'pointColor' => "rgba(151,187,205,1)", 
                                      'pointStrokeColor' => "#fff", 
                                      'data' => [28, 48, 40, 19, 96, 27, 100] 
                                    ] 
                                    
                                ] 
                            ] 
                        ]); ?>     
</div>

Hello! Not work scales options. What am I doing wrong?

ChartJs::widget([
    'type' => 'line',
     'options' => [
         'height' => 70,
         'width' => 400,
         'scales' => [
             'yAxes' => [
                 'ticks' => [
                     'min' => 0
                 ]
             ],
             'xAxes' => [
                 'ticks' => [
                     'min' => 0
                 ]
             ]
     ]
], 'data' => []

How can I apply a 100% width to the chart, eg. to take the width from a surrounding bootstrap container?

Due to the busy schedule I have, I cannot longer maintain our Yii open source libraries. I am looking for a maintainer of the library as I don't want to deprecate the library if its of any use to somebody.

Let me know in this thread those interested. Thanks.

Hello,
I'm getting the following error when trying to install

2amigos/yii2-chartjs-widget 2.0.1 requires bower-asset/chartjs 2.1.6 -> no matching package found.

Please advise