KoolReport's Forum

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

Barchart showing data lables #1289

Open Tallysolutions opened this topic on on Feb 7 - 1 comments

Tallysolutions commented on Feb 7

We are using Chart.js to render bar chart. we want to display data values on chart. how to do the same. not able to find the configuration for same.

Here is the code used:

  <?php
                                \koolreport\chartjs\BarChart::create(array(
                                    "dataSource"=> array(
                                        array("category"=>"Product","sale"=>27000,"cost"=>25000,"target"=>80000,"profit"=>3000)
                                    ),
                                    "dataset"=>array(
                                        "barPercentage"=>0.9,
                                        "categoryPercentage"=> 0.8,
                                        "barThickness" =>12,
                                    ),
                                    "columns"=>array(
                                        "category",
                                        "sale"=>array(
                                            "label"=>"Sale",
                                            "type"=>"number",
                                            "prefix"=>"Rs.",
                                            "config"=>array(
                                                "yAxisID"=>"bar-y-sale",
                                                "backgroundColor"=>"#0000ff",
                                            )
                                        ),
                                        "cost"=>array(
                                            "label"=>"Cost",
                                            "type"=>"number",
                                            "prefix"=>"Rs.",
                                            "config"=>array(
                                                "yAxisID"=>"bar-y-cost",
                                                "backgroundColor"=>"#ffa500",
                                            )
                                        ),
                                        "target"=>array(
                                            "label"=>"target",
                                            "type"=>"number",
                                            "prefix"=>"Rs.",
                                            "config"=>array(
                                                "yAxisID"=>"bar-y-target",
                                                "backgroundColor"=>"#ffffff"

                                            )
                                        )
                                    ),
                                    "options"=>array(
                                        "scales"=>array(
                                            "display"=>false,
                                            "yAxes"=>array(
                                                array(
                                                    "display"=>false,
                                                    "stacked"=>true,
                                                    "id"=>"bar-y-sale",
                                                    "barThickness" =>10,
                                                    "gridLines"=>array(
                                                        "display"=>false
                                                    )
                                                ),
                                                array(
                                                    "stacked"=>true,
                                                    "barThickness" =>10,
                                                    "id"=>"bar-y-cost",
                                                    "display"=>false,
                                                    "type"=>"category",
                                                    "offset"=>true,
                                                ),
                                                array(
                                                    "display"=>false,
                                                    "stacked"=>true,
                                                    "barThickness" =>10,
                                                    "id"=>"bar-y-target",
                                                    "display"=>false,
                                                    "type"=>"category",
                                                    "offset"=>true,
                                                ),
                                            ),
                                            "xAxes"=>array(
                                                array(
                                                    "stacked"=>false,
                                                    "display"=>true,
                                                    "gridLines"=>array(
                                                        "display"=>false
                                                    ),
                                                    "ticks"=>array(
                                                        "display"=>true,
                                                        "suggestedMin"=>0,
                                                        "stepValue"=>100
                                                    )
                                                ),
                                                )
                                                ),
                                                "legend"=>array(
                                                    "position"=>'bottom',
                                                    "display"=>true
                                                ),
                                            ),
                                            "responsive"=>'true',
                                            "maintainAspectRatio"=>'true',
                                ));?>
David Winterburn commented on Feb 11

Hi,

With the latest version of the Chartjs package (2.5.0) we add some popular plugins of Chartjs including data labels. You could enable it like in this example:

\koolreport\chartjs\ColumnChart::create(array(
    ...
    "plugins" => [
        "datalabels"
    ],
    "options" => array(
        "plugins" => [
            "datalabels" => $dataLabelsOptions // e.g: [ "color" => "blue" ]
        ]
    ),
)):

For data label options you could look at its documentation: https://chartjs-plugin-datalabels.netlify.com/guide/options.html

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

ChartJS