Gradient in annotation (chartjs)

Thomas commented on Feb 1, 2021

I need to add a gradient in the annotation of a bubble chart (chartjs).

I know that it is possible (https://github.com/chartjs/chartjs-plugin-annotation/issues/165), but I don't how to integrate the javascript code into the koolreport framework. Is there a callback function I could use?

David Winterburn commented on Feb 2, 2021

Hi Thomas,

Could you please show the javascript code you want to integrate into koolreport? Thanks!

Thomas commented on Feb 3, 2021

Hi David,

well in javascript I would put in the gradient as a fillstyle with a variable like so:

var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
gradientStroke.addColorStop(0, "#80b6f4");
gradientStroke.addColorStop(1, "#f49080");

annotations: [{
      	...
        backgroundColor: gradientStroke,
       ...
        },
      }...

But because this is not possible with koolreport, I am wondering how I can achieve that. I saw in the documentation (https://github.com/chartjs/chartjs-plugin-annotation) that in js there are eventhook possible and would maybe be something like this:

"onload" => "function (context) {
                    var ctx = document.getElementById('GET-ID-FROM-CONTEXT-OBJECT').getContext('2d');
                    var gradient = ctx.createLinearGradient(0, 0, 0, 100);
                    gradient.addColorStop(0, 'rgba(250,174,50,1)'); 
                    gradient.addColorStop(1, 'rgba(250,174,50,0)');
                    ctx.background.fillstyle = gradient;
                }",

Koolreport is a really great tool, which we are planing to use for a long time, but it is hard for me to understand how to achieve this kind of tasks.

This would also solve the problem from the other post (https://www.koolreport.com/forum/topics/1846#p9844) because I would just fill in a annotation box in the background. That's why I posted this. A solution to this would solve multiple problems for me. Hope you can help.

David Winterburn commented on Feb 4, 2021

Were you able to make this whole chart gradient background work with js code and data only (no koolreport php)? If you were, please post your chart's full js code so we get a clearer picture and see how it might be able to be integrated to the Chartjs package. Thanks!

Thomas commented on Feb 4, 2021

Hey David,

I am not sure what you exactly mean but I try my best.

The first part was an example that in plain javascript it is simple to add a gradient to the background of an annotation. Here is an example for that: https://jsfiddle.net/Lwjsrhb4/

The second part was more a question, if there was also a eventhook function inside koolreport, like in the javascript plugin, that I could use.

Off topic: To change the background of the whole chart area and not the annotation, there has to be an extra plugin: https://stackoverflow.com/questions/38493564/chart-area-background-color-chartjs

Because the annotation is more flexible, finding a solution to the annotation background would help koolreport and me more.

David Winterburn commented on Feb 5, 2021

Thanks, Thomas. That's the js code I wanted. Please try the following code with Chartjs widget:

    \koolreport\chartjs\LineChart::create(array(
        "name" => "myLineChart",
        ...
        "options" => [
            "annotation" => [
                        "drawTime" => "afterDraw",
                        "annotations" => [
                            [
                                "id" => 'low-box',
                                "type" => 'box',
                                "xScaleID" => 'x-axis-1',
                                "yScaleID" => 'y-axis-1',
                                "xMin" => -100,
                                "xMax" => 100,
                                "yMin" => -100,
                                "yMax" => -40,
                                "backgroundColor" => "function() {
                                    var ctx = document.getElementById('myLineChart').getContext('2d');
                                    var gradient = ctx.createLinearGradient(0, 0, 0, 100);
                                        gradient.addColorStop(0, 'rgba(250,174,50,1)'); 
                                        gradient.addColorStop(1, 'rgba(250,174,50,0)');
                                    var gradientLow = ctx.createLinearGradient(0, 100, 0, 400);
                                        gradientLow.addColorStop(0, 'rgba(250,174,50,1)'); 
                                        gradientLow.addColorStop(1, 'rgba(250,174,50,0)');
                                    return gradientLow;
                                }()", //set your annotation's gradient here inside a js function call "function(){...}()"
                                "borderWidth" => 1
                            ]
                        ]
                    ], 
        ]
    ));

Let us know the result. Thanks!

Thomas commented on Feb 5, 2021

You guys are the best.

I've tried a function but without the brackets at the end, so I thought this is not possible. You can apply that also on the border color. This gives a lot more options to visualize our charts, thanks a lot.

KoolReport's Forum

Gradient in annotation (chartjs) #1890

Build Your Excellent Data Report