Chartkick Pie chart not showing percentages when using library options

Question

Chartkick Pie chart not showing percentages when using library options

3.6k views Asked by Slowboy At 07 September 2017 at 12:12

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 .

Original Q&A

There are 4 answers

**Ronak Bhatt** · Answer 1 · 2017-09-07 12:22:09

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>

**Oscar Luza** · Answer 2 · 2017-09-09 21:18:20

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 %>

**Jonathan Meller** · Answer 3 · 2018-09-23 14:30:37

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}%)"}}}}

**Benjamin** · Answer 4 · 2019-07-16 01:43:17

Benjamin On 16 July 2019 at 01:43

ChartKick now supports the feature.
You can use

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

TechQA.

Chartkick Pie chart not showing percentages when using library options

There are 4 answers

Related Questions in RUBY-ON-RAILS

Related Questions in RUBY

Related Questions in CHARTS

Related Questions in CHARTKICK

Popular Questions

Popular Tags

Trending Questions