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!