Search code examples
plotlyplotly-dashplotly-python

Is there a way to remove the blur effect around y axis labels on parallel coordinate plots in python plotly?

I have a dashboard I am making in dash and I would like to use a parallel coordinates plot to compare some data however the y axis labels have this blur effect that looks terrible on dark backgrounds. Is there any way to remove this?

Parallel Coordinates Plot

I've tried updating the fonts in the figure and searched around to see if any of the css affects this blur with no luck. I also tried removing the fuzzy text entirely by setting the tickvals to "" or setting the yaxes visible to False but that hasn't worked for me either.

Here is an example using the plotly_dark theme that demonstrates the problem:

import pandas as pd
import plotly.express as px

df = pd.DataFrame({'a':[1,2,3],'b':[100,120,120],'c':[45,30,40]})

fig = px.parallel_coordinates(df, color='a', dimensions=['a','b','c'], template='plotly_dark')
fig.show()

The problem can be seen with a parallel_coordinates graph on any darker background.

Solution

  • This has now been fixed as of plotly version 5

    https://github.com/plotly/plotly.py/issues/2643

    From testing an older version it seems the problem was the text-shadow styles on the tick text elements in combination with the dark theme.