KoolReport's Forum

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

Showing values without hovering w/ ChartJS #1158

Open Jesse opened this topic on on Nov 15 - 8 comments

Jesse commented on Nov 15

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

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

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

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

@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

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

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

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

KoolReport commented on Nov 22

Here is the way. Hope that helps.

KoolReport Is Free and Open-Source!

KoolReport is a professional php reporting framework which saves you tons of time to construct dynamic data report & dashboard.

  • Connect to various datasources such as MySQL, SQL Server, MongoDB or even from CSV or Excel file.
  • Contain series of powerful built-in data processes for your data manipulation.
  • Generate stunning charts and graphs to help you communicate data insights to your audiences effectively.
  • Integrate seamlessly with any php frameworks such as Laravel, CodeIgniter, Symfony.
Download Now and register our tutorials to get started!

Download KoolReport
help needed
suggestion

ChartJS