KoolReport's Forum

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

Display "value" and "ratio" at the Same Time at Tooltip || d3/PieChart #3334

Closed shafiqah opened this topic on on Sep 9 - 2 comments

shafiqah commented on Sep 9

Hey! Im currently working with the d3/PieChart and d3/DonutChart. I intended to display the percentage of the value on the chart and the tooltip just displays the value. Apparently, some of the chart are not wide enough so the percentage doesn't appear on the chart. Therefore, I would like to display the value and also the ratio at the tooltip or any other suggestions that has similar outcome would be helpful.. The attached image is the sample result of my settings.

My sample Code for the settings are as per below:


    protected function onCreated()
    {
        $this
        ->use(\koolreport\d3\PieChart::class)
        ->settings([
            "columns"=>array
            (
                "ps_type"=>array( "label"=>"Module Type"),
                "total"=>array( "type"=>"number" ),
            ),
            "options" => array(
                "legend" => array(
                    "position" => "right", 
                ),
            ),
            "tooltip"=>array( "use"=>"ratio"),
            "label"=>array(
                "use"=>"ratio",
             // "use"=>"value",
            )  
        ]);
    }   
Bright commented on Sep 9

Hi shafiqah,

You do this:

           "options" => array(
                "legend" => array(
                    "position" => "right",
                ),
                "tooltip" => array(
                    "format" => array(
                        "value" => "function(value, ratio, id, index) {
                        return value + ' (' + (ratio * 100).toFixed(2) + '%)';
                        }"
                    )
                ),
            ),
            "label" => array(
                "use" => "ratio",
                // "use"=>"value",
            )
shafiqah commented on Sep 9

Hi Bright,

Worked as intended!

Thanks for your help! Definitely learn something new today.

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
solved

D3