KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.

Annotation in chartjs #1662

Open Thomas opened this topic on on Oct 13 - 8 comments

Thomas commented on Oct 13

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

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

Thomas commented on Oct 14

Unfortunately still nothing there.

Thomas commented on Oct 14

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

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

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

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

Thank you David. Now the annotation is working.

Thomas commented on Oct 16

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',
                            )                            
                        )
                    ),
                ),
 )

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed

ChartJS