KoolReport's Forum

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

Scaling column charts and show values #1657

Closed Thomas opened this topic on on Oct 9 - 8 comments

Thomas commented on Oct 9

How do I achieve the following:

  1. I want to scale the yaxis inmy column chart from 0 to 5.

  2. show what the scale means on the yaxis (0 = agree , 5 = disagree)

  3. show value on top of the column/bar

Thomas commented on Oct 12

to point 3: I found the data labels plugin but no documentation how to use it. I figured it out to implement the value on top but don't understand how to use the formatter.

"options"=>array(
                "plugins"=>array(
                    "datalabels"=>array(
                        "labels"=> array(
                            "values"=> array(
                                "color"=> "black",
                                "anchor" => "end",
                                "offset"=>"0",
                                "align"=>"top",
                                "font"=>array(
                                    "size"=>"12",
                                    "weight" => "bold",
                                )
                            ),
                        ),
                        
                        
                    )
                ),
            ),

How do I also achieve point 1 and 2?

David Winterburn commented on Oct 12

Hi Thomas,

Would you please let us know which chart package you used? Thanks!

Thomas commented on Oct 12

Hi, I am using the Chartjs. Sorry, I thought it would be enough to set this at "Related Packages". Thanks.

David Winterburn commented on Oct 12

Hi Thomas,

The fault is mine. I forgot to check to sidebar info. Regarding your points 1 and 2 please try the ticks option of yAxes which have all the min, max, and custom label options:

   options: {
     scales: {
       yAxes: [{
         ticks: {
           min: 0,
           max: 5,
           stepSize: 1,
           suggestedMin: 0.5,
           suggestedMax: 5.5,
           callback: function(label, index, labels) {
             switch (label) {
               case 0:
                 return 'ZERO';
               case 1:
                 return 'ONE';
               case 2:
                 return 'TWO';
               case 3:
                 return 'THREE';
               case 4:
                 return 'FOUR';
               case 5:
                 return 'FIVE';
             }
           }
         }
       }]
     }
   } 

Of course, you have to convert this json into php array before using it with Chartjs widgets.

Answer source: https://stackoverflow.com/questions/37708374/how-do-i-customize-y-axis-labels-on-a-chart-js-line-chart

Thomas commented on Oct 12

It didn't work. What did I miss?

"options"=>array(
                "scales" => array(
                    "yAxes" =>  array(
                            "ticks" => array(
                                "min"=>0,
                                "max"=> 5,
                                "stepSize"=> 1,
                                "suggestedMin"=> 0.5,
                                "suggestedMax"=> 5.5,
                                "callback" => "function(label, index, labels) {
                                    switch (label) {
                                    case 0:
                                        return 'ZERO';
                                    case 1:
                                        return 'ONE';
                                    case 2:
                                        return 'TWO';
                                    case 3:
                                        return 'THREE';
                                    case 4:
                                        return 'FOUR';
                                    case 5:
                                        return 'FIVE';
                                    }
                                }"

                            )                            
                        )
                ),

            
            ),
David Winterburn commented on Oct 12

I think you missed that yAxes is an array of object in the json. So in php array it should have been:

                   "yAxes" =>  array(
                        array(
                            "ticks" => array(
                                "min"=>0,
                                "max"=> 5,
                                "stepSize"=> 1,
                                "suggestedMin"=> 0.5,
                                "suggestedMax"=> 5.5,
                                "callback" => "function(label, index, labels) {
                                    switch (label) {
                                    case 0:
                                        return 'ZERO';
                                    case 1:
                                        return 'ONE';
                                    case 2:
                                        return 'TWO';
                                    case 3:
                                        return 'THREE';
                                    case 4:
                                        return 'FOUR';
                                    case 5:
                                        return 'FIVE';
                                    }
                                }"

                        )                            
                    )
                )
Thomas commented on Oct 12

Perfect, that worked.

Now for the last part, how do I format the data label to two decimals?

"plugins"=>array(
                    "datalabels"=>array(
                        "labels"=> array(
                            "values"=> array(
                                "value" => "value+value",
                                "formatter"=> "value+value",
                                "color"=> "black",
                                "decimals" => '2',
                                "anchor" => "end",
                                "offset"=>"0",
                                "align"=>"top",
                                "font"=>array(
                                    "size"=>"12",
                                    "weight" => "bold",
                                )
                            ),
                        ),
                        "formatter" => "function(value, context) {
                                        return round(value, 2)"
                        
                        
                    )
                ),
Thomas commented on Oct 14

In case somebody is interested:

"datalabels"=>array(
                        "labels"=> array(
                            "values"=> array(
                                "color"=> "black",
                                "decimals" => '2',
                                "anchor" => "end",
                                "offset"=>"0",
                                "align"=>"top",
                                "font"=>array(
                                    "size"=>"12",
                                    "weight" => "bold",
                                )
                            ),
                        ),
                        "formatter" => "function(value, context) {
                                        var result = value.toFixed(2);
                                        return result;
                                    }"  
                    ),

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
solved

ChartJS