CODEWITHSUNDEEP
ruby-on-railschartkick
Metaphysiker
Metaphysiker

Reputation: 1093

Rails, Chartkick: Show values on the charts

The Chartkick gem lets you create many kinds of charts. Currently, my charts look like this:

pie_chart @institutions

enter image description here

column_chart @stats

enter image description here

I want that values are shown on the charts. In the pie chart, I want the number 244 and 43 be visible in or outside of the pie chart. In the column chart, I'd like to have the values on top or in the column. Is this somehow possible?

Regarding to the pie chart, there is already a stackoverflow-question, but the accepted answer does nothing for me:

pie_chart visits.group(:country).count, library: {pieSliceText: 'value-and-percentage'}

I tried to add the option

library: {pieSliceText: 'value-and-percentage'}

but nothing changed. What am I doing wrong? Is there maybe an option or setting that I am missing?

There is another, similar stackoverflow-question, in which following solutions were proposed:

<%= pie_chart @my_data, library: { pieSliceText: 'value' } %>

and

pie_chart graph_data, { pieSliceText: 'value' }

But both didn't work for me. Is there maybe a new syntax?

EDIT 1:

<% data = [['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]] %>

<%= pie_chart data, library: { pieSliceText: 'value' } %>

gives me this:

enter image description here

EDIT 2: Chartkick proposes 3 ways to install Chartkick. I chose the first one with Chart.js. Due to the helpful comments, I now installed the second way. Now, my Pie-Charts have numbers shown.

Upvotes: 4

Views: 4642

Answers (1)

Vijay Agrawal
Vijay Agrawal

Reputation: 1683

I tried this and it is working fine

<% data = [['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]] %>

<%= pie_chart data, library: { pieSliceText: 'value' } %>

enter image description here

What is the structure of @institutions, may be that's causing some issue.

UPDATE:: on column chart

The GH for chartkick says there is no official support for showing data on each column yet https://github.com/ankane/chartkick.js/issues/38#issuecomment-271117774

Upvotes: 4

Related Questions