Chartkick Pie chart not showing percentages when using library options

Question

In my ROR I want to add Percentages to my Piechart, I'm using the chartkick gem to render the Pie chart. I've tried various approaches to the problem, but none seems to work. I've also googled around and look at similar posts at stack overflow.

This is what I've come up with but it's not showing the %.

 <%= pie_chart [["Soccer", @soccer_total], ["Basketball",  @basketball_total, ["Baseball",  @baseball_total], ["Other", @other_total ]], library: {legend: {labelFormat: '{name} : {y} ({percentage}%)'}} %>

I've also tried this approach, but still with out a luck

<%= pie_chart [["Soccer", @soccer_total], ["Basketball",  @basketball_total, ["Baseball",  @baseball_total], ["Other", @other_total ]], library: {pieSliceText: 'value-and-percentage'} %>

Please can someone more experienced help me with this?

UPADATE FOR OSCAR'S ANSWER

I followed the directions provided for Oscar's answer but its still not showing %.

This how the <head>in application.html.erb looks:

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag "path/to/highcharts.js", "chartkick" %>

and the appplication.js is like this:

//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

By getting rid of Chart.bundle in application.js shows the percentage in pie chart — Kick Buttowski, Dec 12 '18 at 18:45

Oscar Luza · Answer 1 · 2017-09-12T03:26:55.037

I had a similar problem working with this. So Chart.bundle doesn't provide that options for pie chart

Instead of that you can use Google Charts as specified at documentation here

So what you have to do is remove //= require Chart.bundle from application.js

Go to application.html.erb or the layout that you are using for showing your view and before <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> or something similar that you have for loading js libs add <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>. It will look like this:

<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

And there is!. Also I noticed that you are missing a "]" at your code. Fixing that you can run the chart with this:

<%= pie_chart [["Soccer", @soccer_total], ["Basketball",  @basketball_total], ["Baseball",  @baseball_total], ["Other", @other_total ]] %>

You should be able to see the percentages without adding any options

If you want customize the chart options then you can see the documentation here

EDIT: You application.js should look like this

//= require jquery
//= require jquery_ujs
//= require chartkick
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

And your application.html.erb or the layout that you are using at your controller like this(delete that highcharts.js include_tag at the end you don't need it):

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

Thank you @Oscar Luza, I tried to modify the files according to your answer, but it is still not showing the % in the chart. Please see my edit to the Question. — Slowboy, Sep 10 '17 at 01:06
at you application.js you are missing this `//= require chartkick` — Oscar Luza, Sep 10 '17 at 01:55
@Slowboy only remove `//= require Chart.bundle` not the other line, take a look at the edit — Oscar Luza, Sep 10 '17 at 03:50
if I remove the `include_tag`for `highcharts.js` my graphs are displaying this messages `Error Loading Chart: No adapter found` — Slowboy, Sep 10 '17 at 11:42
@Slowboy Did you copy and paste the code at `application.js` and on your layout `application.html.erb`?. That error means that you are not loading this line ` <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>`at `application.html.erb`. In other case it can be that you are using another layout at your controller for rendering the views where the charts are — Oscar Luza, Sep 10 '17 at 17:19

Ronak Bhatt · Answer 2 · 2017-09-15T07:59:03.537

hey You can find Something better here

As per my opinion, you can try this code. Instead of this

<%= pie_chart [["Soccer", @soccer_total], ["Basketball",  @basketball_total, ["Baseball",  @baseball_total], ["Other", @other_total ]], library: {pieSliceText: 'value-and-percentage'} %>

You can Try This

<%= pie_chart [["Soccer", @soccer_total], ["Basketball",  @basketball_total, ["Baseball",  @baseball_total], ["Other", @other_total ]], library: {pieSliceText: 'value'} %>

Hey you can puth below code in your header.

<script> https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js</script>
<script> https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js</script>
<script> https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js</script>
<script> https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js</script>

Thank you @Ronak Bhatt but your solution isn't changing anything, still can't see the percentage — Slowboy, Sep 07 '17 at 12:33

score 1 · Answer 3 · answered Sep 23 '18 at 14:30

I made it by doing this

1) I configured my Chartkick to use Highcharts, as described in https://github.com/ankane/chartkick.

2) I used the following library options with my pie chart:

library: {plotOptions: {pie: {dataLabels: {format: "<b>{point.name}</b>: {point.y} ({point.percentage:.1f}%)"}}}}

score 1 · Answer 4 · answered Jul 16 '19 at 01:43

1

ChartKick now supports the feature.
You can use

<%= pie_chart data, suffix: "%" %>

answered Jul 16 '19 at 01:43

Benjamin

10,085
19
80
130

Chartkick Pie chart not showing percentages when using library options

4 Answers4