chartjs-plugin-annotation

[mkormout]

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

[tonydspaniard]

@kormizz any help highly appreciated. PRs welcome.

[sasha-x]

+1 @kormizz

use yii\web\AssetBundle;
class ChartJsAnnotationAsset extends AssetBundle
{
    public $sourcePath = '@bower/chartjs-plugin-annotation';
    public $js = [
        'chartjs-plugin-annotation.js',
    ];
    public $depends = [
        'yii\web\JqueryAsset',
        'dosamigos\chartjs\ChartJsAsset'
    ];
}

class ChartJs extends \dosamigos\chartjs\ChartJs
{
    //add annotation plugin support
    protected function registerClientScript()
    {
         //other way options block in js config is empty and annotations don't work
        $this->clientOptions = $this->options;  
        $view = $this->getView();
        ChartJsAnnotationAsset::register($view);
        parent::registerClientScript();
    }
}

Should I make PR(s)?

[tonydspaniard]

@sasha-x that would be great. Please, make sure test work when you do. Thanks.

[bbushong]

Can I get more detail as to where the above code goes? I'm trying to get this plugin to work as well, and would love more details...

[mkormout]

Can I get more detail as to where the above code goes? I'm trying to get this plugin to work as well, and would love more details...

It's a long time but AFAIK:

PREPARATION:

• Require "bower-asset/chartjs-plugin-annotation" in composer.json.
• Create a new module in assets folder called ChartJsAnnotationAsset.php and paste the class ChartJsAnnotationAsset inside...

OPTION 1 - local usage:

• In View where you want to use it, call ChartJsAnnotationAsset::register($this)
• You should call this in each view where the annotation plugin is needed...

OPTION 2 - global usage:

• Create a new class for ChartJs extending \dosamigos\chartjs\ChartJs and override registerClientScript method like in the example above.
• Use the new class instead of original one...
• With this option, registration of the annotation plugin is automatic...

[bbushong]

@mkormout a H-U-G-E thank you! I was close, but you got me the rest of the way!! For anyone else that needs a little more info (when going with option 1): At top of view:

use dosamigos\chartjs\ChartJs;
use app\assets\ChartJsAnnotationAsset;
ChartJsAnnotationAsset::register($this)

and then the client options part in that view:

'clientOptions' => [
        'legend' => [
            'labels' => [
                'fontFamily' => "'Roboto', sans-serif;'",
            ]
        ],
        **'annotation' => [
            'annotations' => [
                [
                    'drawTime' => 'afterDatasetsDraw',
                    'display' => true,
                    'type' => 'line',
                    'mode' => 'horizontal',
                    'scaleID' => 'yAxes', // links to below...
                    'value' => '100',
                    'borderColor' => 'red',
                    'borderWidth' => 2,
                ],
            ],
        ],
        'scales' => [
            'yAxes'=> [
                [
                    'id' => 'yAxes',   //needed for the scaleID above...
                    'ticks' => [
                        'beginAtZero' => true,
                        'fontFamily' => "'Roboto', sans-serif;'",
                        'suggestedMax' => 100,
                    ],
                ]
            ],
            'xAxes'=> [
                [
                    'ticks' => [
                        //'fontFamily' => "'Roboto', sans-serif;'",
                        'stepSize' => 1,
                    ],
                ]
            ],
        ],
    ],

Again, thank you so much!