plotly / plotly/plotly.js

Funnel plot text does not position itself properly

Ouverte
#7,756 7 commentaires 6 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

bug P3
Langage dominant
JavaScript
Étoiles
18.3k
Forks
2k
Merge moyen
2 j 12 h
PR mergées (30 j)
28

Description

I'm attempting to produce a stacked funnel plot of activities. The labels are not appearing as expected on the plot.

I'm reposting my question from Stack Overflow here based on the response I got there indicating this might be a bug and it would be of interest here. I did not see a duplicate while searching GitHub.


First my code:

import pandas as pd
import plotly.express as px

stages = ["Initial Landing", "Step 2", "Step 3", "Added to cart", "Purchased"]
regiona_plotly = pd.DataFrame(dict(number=[10866,10543,1067,1032,108], stage=stages))
regionb_plotly = pd.DataFrame(dict(number=[10650,10432,1076,1036,1012], stage=stages))
regiona_plotly['region'] = "Region A"
regionb_plotly['region'] = "Region B"
df = pd.concat([regiona_plotly, regionb_plotly], axis=0)
fig = px.funnel(df, x='number', y='stage', color='region')
fig.update_traces(textposition='auto')
fig.update_layout(autosize=True)
fig.write_image("region_funnel.png")

(Lifted almost entirely from plotly documents)

This code produces an image like so:
Plotly - Auto Text Position

Notice that on "Step 3", "Added to cart", and "Purchased" the region A text is scaled very small and inside the bar, but Region B is outside.

I tried updating this line:

fig.update_traces(textposition='outside')

But, with this, I get both values overlapping on the Region B side of the funnel. Also, the text goes outside of the plot on the upper bands.

Plotly - Outside Text Position

How can I get text to be the same size and either be within the bar if it fits at the size or outside and on the correct side, if it doesn't?

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par reproduire l’entonnoir empilé avec l’exemple fourni utilisant pandas, plotly.express, update_traces(textposition='auto') et write_image. Suivez la manière dont le positionnement du texte de l’entonnoir gère les libellés Region A et Region B aux étapes les plus petites ; le travail est terminé lorsque les libellés conservent une taille lisible et cohérente, restent du bon côté et ne se chevauchent pas ou ne sortent pas du graphique.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript, python
Domaine
data-visualization
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
48/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.