Annotation in chartjs

Thomas commented on Oct 13, 2020

I found in the plugin section of your chartjs documentation a link to the plugin documentation.

https://github.com/chartjs/chartjs-plugin-annotation

I have the following code and nothing appears in the chart. I want to draw a simple horizontal line at the value 1,5. Help is much appreciated.

            "plugins"=>array("annotation","datalabels"),
            "options"=>array(
                "plugins"=>array(
                    "annotation"=> array( 
                        "annotations"=>array(
                            "drawTime"=> 'afterDatasetsDraw',
                            "id"=> 'a-line-1', // optional
                            "type"=> 'line',
                            "mode"=> 'horizontal',
                            "scaleID"=> 'y-axis-0',
                            "value"=> "1,5",
                            "borderColor"=> 'red',
                            "borderWidth"=> 2,
                            "label"=>array(
                                "enabled"=> true,
                                "content"=> "Signifikante Differenz",
                                "position"=> "center",
                            ),
                            "onClick" => "function(e) {}"
                        )
                    ),
                ),         
            ),

KoolReport commented on Oct 14, 2020

You try "value"=>'1.5' to see how

Thomas commented on Oct 14, 2020

Unfortunately still nothing there.

Thomas commented on Oct 14, 2020

I've read the chartjs documentation for the plugin but can't see the solution.

Do you have a functioning example for that, to see that it's working at all?

David Winterburn commented on Oct 16, 2020

Hi Thomas,

Please set "annotations" as an array of arrays like this:

    "annotations" => array(
        array(
            //put your annotation config here
        )
    )

Let us know how it works for you. Thanks!

Thomas commented on Oct 16, 2020

I've found that too but that didn't help either.

"annotation"=> array( 
                        "drawTime"=> 'afterDatasetsDraw',
                        "annotations"=>array(
                           array(
                                "drawTime"=> 'afterDatasetsDraw',
                                "dblClickSpeed"=> 350,
                                "id"=> 'a-line-1', // optional
                                "type"=> 'line',
                                "mode"=> 'horizontal',
                                "scaleID"=> 'yAxis',
                                "value"=> '1',
                                "borderColor"=> 'red',
                                "borderWidth"=> 2,
                                "label"=>array(
                                    "enabled"=> true,
                                    "content"=> "Signifikante Differenz",
                                    "position"=> "center",
                                ),
                            )
                        )
                    ),

Could you give me a example, which is working on your site?

David Winterburn commented on Oct 16, 2020

Hi Thomas,

We've investigated the issue with Chartjs' annotation plugin. The fault might be with the plugin's documentation at this link:

https://github.com/chartjs/chartjs-plugin-annotation

To make it work please move the "annotation" setting to below "options" instead of "plugins". So the code should be:

                    "plugins"=>array("annotation","datalabels"),
                    "options"=>array(
                        "annotation"=> array(
                            "annotations"=>array(
                                array(
                                    "drawTime"=> 'afterDatasetsDraw',
                                    "id"=> 'a-line-1', // optional
                                    "type"=> 'line',
                                    "mode"=> 'horizontal',
                                    "scaleID"=> 'y-axis-0',
                                    "value"=> 1.5,
                                    "borderColor"=> 'red',
                                    "borderWidth"=> 2,
                                    "label"=>array(
                                        "enabled"=> true,
                                        "content"=> "Signifikante Differenz",
                                        "position"=> "center",
                                    ),
                                    "onClick" => "function(e) {}"
                                )
                            )
                        )
                    ),

Another note is that the "value" property should be a number, so 1.5 instead of "1,5".

Please try it and let us know if it works for you. Thanks!

Thomas commented on Oct 16, 2020

Thank you David. Now the annotation is working.

Thomas commented on Oct 16, 2020

If someone runs into an error. It could also help, that the id for the scale is set and is the same as the scaleID in the annotation settings.

"options"=>array(
    "scales" => array(                    
                    "yAxes" =>  array(
                        array(
                            "id"=>'y-axis-0',
                            )                            
                        )
                    ),
                ),
 )

KoolReport's Forum

Annotation in chartjs #1662

Build Your Excellent Data Report