KoolReport's Forum

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

Showing values without hovering w/ ChartJS #1158

Open Jesse opened this topic on on Nov 15, 2019 - 10 comments

Jesse commented on Nov 15, 2019

I'm using ChartJS graphs right now and I want the values of my columns to display without having the user have to hover over the slice or bar they want. How would I make it so that the value of a slice or a bar shows itself without needing user input (the site will be displayed on a TV so there is no user interaction)? I've figured out using annotations for google charts, but I haven't found any counterpart for ChartJS. If you'd like to see any code, I'd be happy to post it. Thanks!

KoolReport commented on Nov 18, 2019

It requires a plugin for chartjs called "chartjs-plugin-annotation.js". I will make your post as suggestion for dev.team to make improvement.

Jesse commented on Nov 19, 2019

I'll try it out, how do I normally install plugins like this one? I'm not sure how to install chartJS plugins for koolreports. Thanks for the suggestion and the help.

Jason commented on Nov 19, 2019

Curious why Koolreport would not have included this as it seems to be a vital function for Chart Displays.

Not all users will be 'interacting' with the reports and it does not allow the data to be displayed upon export or print unless you have a data table to correlate the images of what you see to something meaningful.

KoolReport commented on Nov 21, 2019

@Jason: Yes, I also feel so, there is always room for improvement. I have submitted this suggestion to dev.team.

Jason commented on Nov 21, 2019

After visiting the ChartJs site,

https://www.chartjs.org/docs/2.7.2/notes/extensions.html

and researching the annotations plugin, i believe you are incorrect.

The plugin to display data point values, appears to be

chartjs-plugin-datalabels - Displays labels on data for any type of charts.

That we are looking for.

KoolReport commented on Nov 21, 2019

I see, I updated with our team. The devteam confirm that option to add plugins will be in the next version. For now, I will post the guide of how to add datalabel plugin to chartjs. Give me sometime.

Jason commented on Nov 21, 2019

Thank you , could you post back that link after completion, it would be much appreciated!

KoolReport commented on Nov 22, 2019

Here is the way. Hope that helps.

Venom commented on Jan 20, 2021

I noticed that Chart.php in version 2.5.0 for chartjs already contained

"datalabels"=>array(
                "chartjs-plugin-datalabels.min.js"
            ),

in resourceSettings()

Is there any option that needs to declare for ColumnChart to display data label?

ColumnChart::create(array(
    "title"=>"Sale Report",
    "dataSource"=>$category_amount,
    "columns"=>array(
        "category",
        "sale"=>array("label"=>"Sale","type"=>"number","prefix"=>"$"),
        "cost"=>array("label"=>"Cost","type"=>"number","prefix"=>"$"),
        "profit"=>array("label"=>"Profit","type"=>"number","prefix"=>"$"),
        "team8"=>array("label"=>"Team8","type"=>"number","prefix"=>"$"),
    )
));
David Winterburn commented on Jan 22, 2021

Please add "plugins" property to your chart:

ColumnChart::create(array(
    ...
    "plugins" => ["datalabels"],

Then apply the lable option for the plugin.

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
suggestion

ChartJS