Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

Plotly express area plot with mode='none' resets colours

Hello Everyone,

I am trying to make an area plot without lines and setting the category colours. I can make the plot and set the colours. However, the colours are reset to the default colours when the I update the trace to remove the lines, i.e. setting the mode=‘none’.
Is there a way to do this without resetting the colours? I am new to plotly and I am likely updating the trace incorrectly but I have not found any relevant examples yet, so any help will be greatly appreciated.
Here is the code to reproduce the problem:

import sys
import pandas as pd
import plotly.express as px

Iris = px.data.iris()

fig = px.area(Iris, x='petal_width', y='species_id', color='species', color_discrete_map={"setosa": "#6666ff", "versicolor": "#fd66ff", "virginica": "#ffff0a"})

which produces the following plot:

When I update the trace with the following code:
fig.update_traces(mode='none')
The plot becomes:

How can I remove the lines and keep the defined colours?

Thanks in advance for any help or pointers.

Hi @laflores welcome to the forum! If you do a print(fig) after creating the figure with px.area you’ll see that the colors are defined as line attributes, which are ignored when mode='none'. The easiest solution here is probably to set the line width to zero with

fig.update_traces(line_width=0)

Hello Emmanuelle,

Thanks for your help. Using line_with=0 makes the plot look how I want it. However, the hover functionality is still attached to the line, so it shows wrong details even when the cursor is over the other areas. This screen grab show what I mean:


Hover is showing the details for virginica while the cursor hovers over setosa. Is there a way to fix this so that the hover is triggered by the area and not the line?

Thanks again,