KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Change Color for Chartjs' Columns #2165

Open Freddy opened this topic on on Jun 26, 2021 - 1 comments

Freddy commented on Jun 26, 2021

Hi, I am new to Koolreport and I would like to be able to change the color of the columns to be able to differentiate the graphs.

In my case I would like a different color depending on the month, could someone help me?

This is my graph, I would like the month of December to have one color and November another.

Sebastian Morales commented on Jun 28, 2021

Our Chartjs package has supported multi color in one series yet. There're two work around solutions for you in this case:

1 . Make your data multiple series (i.e one row with multiple columns instead of multiple rows with one column). You could try our Transpose or Transpose2 process to transpose the data.

2 . Edit the file koolreport/BarChart.php and replace the following lines:

            $dataset = array(
                "label"=> Utility::get($cSettings,"label",$columnKeys[$i]),
                "borderWidth"=>1,
                "borderColor"=>$this->getColor($i-1),
                "backgroundColor"=>$this->getRgba($this->getColor($i-1),$this->backgroundOpacity),
                "data"=>array(),
                "fdata"=>array(),
            );

with these ones:

            $dataset = array(
                "label"=> Utility::get($cSettings,"label",$columnKeys[$i]),
                "borderWidth"=>1,
                "borderColor"=>$this->getColor($i-1),
                "backgroundColor"=>$this->getRgba($this->getColor($i-1),$this->backgroundOpacity),
                "data"=>array(),
                "fdata"=>array(),
            );
            $backgroundColorArray = Utility::get($this->params, "backgroundColorArray");
            if (isset($backgroundColorArray)) $dataset["backgroundColor"] = $backgroundColorArray;

Then in your BarChart's create in your report's view:

            ColumnChart::create(array(
                ...
                "backgroundColorArray" => ["#FF0000","#00FF00","#0000FF","#FF0000","#00FF00","#0000FF","#FF0000","#00FF00","#0000FF",] //use color hexa code
            ));

Rgds,

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
None yet

ChartJS