An option to hide 0% text on pie charts

[meglio]

Please look at this example:

Here, the two 0% texts make no sense. It's getting even worse if there are many options. They just get stacked vertically and take a lot of space and look ugly.

An option to switch off showing zero-percent texts on pie charts would be very hepful.

Please note it's not the same as toggling pie slices when clicking on legend items, in which a case the opacity of those hidden legend items become 0.5 instead of 1 (default).

[mdtusz]

It's unlikely that the maintainers will implement this in the near future. The main target for plotly.js is scientific plotting and as such, it's generally preferred to preserve the results of data - a data field with a value of 0 is still significant in the eyes of science.

A workaround for this however is to either apply custom text labels to your data, setting the values corresponding to 0 as null like in the code below, or alternatively, you may remove the 0 data from your initial plot-data before plotting.

Plotly.plot('graph', [{
  type: 'pie',
  labels: ['apples', 'bananas', 'clementines'],
  values: [20, 40, 0],
  text: [20, 40, null],
  textinfo: 'text'
}])

As always, we are open to pull requests from the community for the feature, but it is not high on our list of priorities at the moment.

[meglio]

it's generally preferred to preserve the results of data - a data field with a value of 0 is still significant in the eyes of science.

I'm not proposing to remove zeros from the chart altogether, but rather from the pie graph. They should still be shown in the list of labels.

If a slice is NOT shown on the graph (its slice width = zero degrees) , what's the sense to write 0% and point it to some non-existent space on the graph - this is confusing.

This, and many other tiny things could be adjusted case-by-case as needed if there were callbacks for labels, texts, tooltip content etc. It was not obvious how to do any such a customization at a glance, nor I found the way to "override" Plotly's methods. If you know of any ways to override methods in JS after the library is loaded, could you drop me a hint, please.

---

Also, if I were to make it customizable through a setting, where would I start? The source code is quite large. Could you point me to the right place, please.

[meglio]

What I found so far is this piece of code:
Here is a workaround I found so far.

Here is the piece of code that draws text for every clice of a pie chart:

var textPosition = Array.isArray(trace.textposition) ? trace.textposition[pt.i] : trace.textposition,
  sliceTextGroup = sliceTop.selectAll('g.slicetext')
    .data(pt.text && (textPosition !== 'none') ? [0] : []);

It looks like it accepts arrays for textposition.

The solution, though, is to pass an array of textposition, where none text position is set for all zero values.

---

The question is, is this a feaure and will it remain working like that in the next major version?

[nikitawolfik]

I wonder if that's still relevant, but I've found this while struggled with the same problem, so maybe someone else will find this, too.
The solution is actually very simple - all you need is to set {"textposition"} to "inside".
textposition: 'inside'
If you are using React-plotly, then it is
<Plot layout={{ textposition: 'inside', }} />
The only difference is that now all the values are placed inside pie slices.
I had a number (5 or 6) of very small slices, which were behaving as you explained, and now they're still ugly inside those little slices, but I think this looks less ugly :)

[rachteo]

We ran into the same problem, but as in the screenshot above textposition: 'inside' results in values that are too small to read in many cases. The workaround we settled for in the end was to remove 0 data before plotting, but that results in the legend also omitting the items with a 0 value, which is not ideal. The vertical stacking of 0% results is especially problematic when used in conjunction with Plotly.toImage as the stack tends to get cut off.

[nikitawolfik]

We ran into the same problem, but as in the screenshot above textposition: 'inside' results in values that are too small to read in many cases.

It is, yet in my case values were equally small / unreadable whether they were inside or outside, so to read that data you had to hover over it either way. That looks better, but still is a workaround. I hope this will be someday addressed by the devs :)

[rborthwi]

I've had to remove all zeroes prior to making the chart. I don't like doing that, but it fixed it.

[rainer-rq-koelle]

A workaround to suppress the 0% labels is to filter your data before supplying it to pie code. This may work, if you can live with certain categories/portions not showing. Otherwise, the comment above that also 0-values are scientifically relevant holds.

[tony]

I'd like an option to show/hide based on value as a callback. That'd be the true solution.

I also believe another option would be to allow a callback to conditionally show the text based on its value (e.g. label, value, percent)

Thanks @meglio @ #452 (comment)

DefinitelyTyped definitely doesn't support this in textposition (nor does it have automargin yet)

function calculateData(languageMap) {
  const total = Object.values(languageMap).reduce((a, b) => a + b, 0);
  return {
    type: "pie",
    values: Object.values(languageMap),
    labels: Object.keys(languageMap),
    textinfo: "label+value",
    textposition:
      Object.values(languageMap).map((value) =>
        (value / total) * 100 > 4 ? "inside" : "none"  // Only show if segment > 4%
      ) ?? "none",
  };
}

[tony]

Here's how I did it with @mdtusz's workaround in #452 (comment)

By returning '' is also worked with TypeScript without any extra effort

function calculateData(languageMap) {
  const total = Object.values(languageMap).reduce((a, b) => a + b, 0);
  return {
    type: "pie",
    values: Object.values(languageMap),
    labels: Object.keys(languageMap),
    text: Object.entries(languageMap).map(([languageName, value]) => {
      if ((value / total) * 100 > 4) {
        return `${languageName}: ${value}`;
      }
      return "";  // `undefined` and `null` both had issues with @types/plotly.js
    }),
    textinfo: "text",
  };
}

It's not clear to me how to make the numbers appear on a newline like label+value did

The downside is mouseover/tooltips now duplicate stuff:

To get around that I had to do another template:

function calculateData(languageMap) {
  return {
    type: "pie",
    values: Object.values(languageMap),
    labels: Object.keys(languageMap),
    hoverinfo: "text",
    hovertext: Object.entries(languageMap).map(
      ([languageName, value]) => {
        return `${languageName}: ${value} (${(
          (value / total) *
          100
        ).toFixed(2)}%)`;
      }
    ),
    text: Object.entries(languageMap).map(([languageName, value]) => {
      if ((value / total) * 100 > 4) {
        return `${languageName}: ${value}`;
      }
      return "";
    }),
    textinfo: "text",
    // @ts-ignore
    // automargin: true,
  }
}