Set columns series color - GoogleChart #1946

Closed Andre Van Der Walt opened this topic on on Mar 5, 2021 - 2 comments

Andre Van Der Walt commented on Mar 5, 2021

Hi,

Please advise how to apply the below code into KoolReport to color column series: https://developers.google.com/chart/interactive/docs/gallery/columnchart

Your help will be much appreciated.

var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],

       ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

KoolReport commented on Mar 7, 2021

You can refer to here.

You need a field that contain color for your series and do like following:

use \koolreport\dashboard\widgets\google\ColumnChart;

class MyChart extends ColumnChart
{
    ...

    protected function fields()
    {
        return [
            Text::create("category"),
            Number::create("amount")
                ->style(function($row){
                    return "color:".$row["color"];
                })
        ];
    }
}

Andre Van Der Walt commented on Mar 8, 2021

Hi,

Thank you, work like a charm with a switch case and a $color variable as well!

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

Labels

help needed

solved

Related package Dashboard

KoolReport's Forum

Set columns series color - GoogleChart #1946

Build Your Excellent Data Report