Pie chart

[markov00]

Is your feature request related to a problem? Please describe.
It's required to draw piechart and donut chart, with one or multiple levels.

Describe the solution you'd like

• Reuse as much as possible the code already implemented for XY axis
• Use the same Chart structure but different specs for chart PieChartSeries

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Rendering a piechart is not so difficult, we can just use d3-arcs to compute the paths.

import { arc, pie } from 'd3-shape';

const pieSpec = {
  data: [[10],[20], [30]],
  accessor: 0,
}

const paths = pie().value((d: any) => {
  return d[pieSpec.accessor];
})(pieSpec.data);

// that is the space allowed to render the pie chart we should take in consideration the 
// how much space a direct labelling on the chart take
const { width, height } = chartDimensions; 
const outerRadius = width < height ? width / 2 : height / 2;
const innerRadius = pieSpec.donut ? outerRadius / 2 : 0;

const arcGenerator = arc();
const arcs = paths.map((path) => {
  const arc = arcGenerator({
    ...path,
    innerRadius: innerRadius,
    outerRadius: outerRadius,
  });
  return {
    arc: arc === null ? '' : arc,
    color: 'red',
    transform: {
      x: width / 2,
      y: height / 2,
    },
    geometryId: {
      specId: pieSpec.id,
      seriesKey: [],
    },
    seriesArcStyle: settings.theme.arcSeriesStyle.arc,
  };
});

The difficult part is the label positioning, place labels to avoid overlaps and overflows.
The pre-computing label dimensions will came in handy, but we need a good alghoritm to place them without overlapping them together.

We have to take in consideration also the style of the slices, specially when we will have many small slices.

Consider also label rotations as described here: https://www.amcharts.com/docs/v4/tutorials/labels-inside-pie-chart-slices/

Other interesting references:

• https://www.visualisingdata.com/2016/02/the-little-of-visualisation-design-part-1/

Features:

• label inside the donut chart: #7446: Total Metric Count inside donut pie charts kibana#16820

Kibana Cross Issues

• https://github.com/elastic/kibana/issues?q=is%3Aopen+is%3Aissue+label%3A%22%3APie+Chart%22

Checklist

• this request is checked against already exist requests
• every related Kibana issue is listed under Kibana Cross Issues list
• kibana cross issue tag is associated to the issue if any kibana cross issue is present

[shahzad31]

Is there any update on this?

[markov00]

@monfera is currently working on this. Robert do you want to add some examples of the current status. I first need to merge a quite big refactoring of the library (it can be probably done in two weeks max) and than we can introduce the first version of the pie chart.

[monfera]

@shahzad31 we have most of the code; tests and improvements are being added as we speak

[shahzad31]

Example looks great , thanks @monfera .. Are we close on this?

cc @justinkambic @andrewvc

[monfera]

@shahzad31 Thanks! The main elastic-charts branch is still undergoing major refactoring, the plan is for the integration to start next week and likely it'll take a couple of weeks of non-fulltime work (I'm off next week, then some Elastic{ON} days), so we're looking at late October, I'll reach out to you once it can be test driven, maybe a tad earlier

[justinkambic]

@monfera per your advice we're implementing a basic donut in D3, and then when y'all ship this we will migrate to it. Our chart is literally the simplest use case for a pie chart, so it should be a very easy transition.

[nickofthyme]

I saw this today and wanted to make a note of it for the future. I like the idea of the center value retaining the previously selected slice. That way you can easily drill into AND out.

[monfera]

@nickofthyme good reference, I think it also came up on the 1st call where the issue of small slices on sunbursts came up, one reason for the color sharing between rings here 😄 There's a stale branch I'll try to brush up and merge for folks to experiment with

[markov00]

🎉 This issue has been resolved in version 16.2.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀

[businessK8T]

hello @markov00 ... a year later ... how does one find out what version of kibana the fix is present in? the "resolved in version 16.2.0" doesn't jibe w/kibana's version number levels (6.8/7.1/etc) sorry to ask an old and annoying question...

[monfera]

Best place to look is package.json in Kibana, ie. here and this same file has the Kibana version on top (eg. the linked version in master shows the unreleased 8.0). So, best to go to the release tag in elastic/kibana you want, and see the package file. Btw. it's been in Kibana for a long while

[businessK8T]

fingers crossed "long time" covers how "old" my kibana is ... not by choice ... also, thanks a million for the answer!

[markov00]

@businessK8T are you looking for a particular issue/bug in kibana for the piecharts? if so can you link it here?
This Piechart is currently used in Lens, and for 7.13 probably (if we have time) we will also release the migration of the existing Visualize Pie chart code with this implementation

[businessK8T]

at least on the surface this / a very similar pie-chart-missing-labels github "thing" (elastic/kibana#16746) matches the "performance variance" we're seeing ATM. h i'm looking through all the different package.json files b/c apparently there's more than one ;)
.. planning on updating the application of which ELK is just a part of the whole this week so hopefully the "performance variance" will go away.

[markov00]

@businessK8T this is the Kibana PR to follow for the Kibana migration to the new charting library: elastic/kibana#83929
If you are ok, we can also suggest a better representation for your data instead of a pie chart if you can describe your current use case, piechart are not always the best way to visualize data, in particular, if you are looking to compare slices side by side with precision, or if you have more then 3/5 very similar slices.