KoolReport's Forum

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

Barchart showing data lables #1289

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

Tallysolutions commented on Feb 7, 2020

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, 2020

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