Kibana displays customized percentage in pie chart

Introduction

Kibana 3 has got a good pie chart, which will displays the percentage label by default. But when it comes to Kibana 4 or even Kibana 5.X, this feature has gone. Let’s see what it looks like.

Kibana 3

Kibana 4

Many guys complained about this in the github discuss section. This is the discussion thread: https://github.com/elastic/kibana/issues/2284

I have also come across this and decided to implement it by myself.

Solution

Env

What I have got during my implementation includes

• Kibana 4.5.4
• AWS Elasticsearch 2.3.1

Files changed

Kibana 4 and Kibana 5.X are using d3 (version:3.5.6) to draw the graphs. It is really old, but I decided not to upgrade it since some APIs of d3 have changed since.
The whole thing is simple. Kibana is using d3 to draw the pie chart, so what I need to do is to hack the pie chart of kibana. So my PR looks like the following:

I would also paste the file here, to help you copy & paste.

diff --git a/src/ui/public/vislib/visualizations/pie_chart.js b/src/ui/public/vislib/visualizations/pie_chart.jsindex baad87f..c68ecf9 100644--- a/src/ui/public/vislib/visualizations/pie_chart.js+++ b/src/ui/public/vislib/visualizations/pie_chart.js@@ -135,12 +135,12 @@ define(function (require) {         return Math.max(0, y(d.y + d.dy));       });-      var path = svg+      var g = svg       .datum(slices)       .selectAll('path')       .data(partition.nodes)-      .enter()-        .append('path')+      .enter();+      var path = g.append('path')         .attr('d', arc)         .attr('class', function (d) {           if (d.depth === 0) { return; }@@ -153,6 +153,25 @@ define(function (require) {           return color(d.name);         });+      // set the default text+      g.append('text')+        .attr('transform', function (d) {+          var _d = arc.centroid(d);+          _d[0] *= 1.1; //multiply by a constant factor+          _d[1] *= 1.1; //multiply by a constant factor+          return 'translate(' + _d + ')';+        })+        .attr('dy', '.0em') // y axis offset+        .style('text-anchor', 'middle')+        .text(function (d) {+          if (d.hasOwnProperty('name') && d.hasOwnProperty('percentOfParent') &&+            d.percentOfParent >= 0.05 /* If too small, just do not show */ ) {+            return d.name + ':' + ((d.percentOfParent * 100).toFixed(2)) + '%';+          } else {+            return '';+          }+        });+       if (isTooltip) {         path.call(tooltip.render());       }

Demo

I have got a piechart, with two splits.

It looks good so far. Enjoy yourself here.

Reference

• a demo from: http://bl.ocks.org/dbuezas/9306799

Contact me

If you got any question, you are welcome to contact me via:

• email: [e-mail]
• wechat: nisxiya