Hi there,
I’m using plotly on an app in darkmode in React and I would like to change the color of the labels to #fff. Is there any way to do this? I’ve seen it is quite easy with other Ploly libraries, but the documentation on the Plotly library for react is sparse.
Thanks,
Chris.
react-plotly.js uses the exact same figure schema as the other Plotly.js-based libraries, so you can use the layout.font.color attribute to set the figure-wide text color.
Hi Nicolas,
Thanks for the quick answer! I am trying to understand this, but the syntax seems different, and it’s not accepting what I interpret “layout.font.color” to be. Here’s my component:
<Plot
data={[
{
values: [completedTasks, openTasks],
labels: [“Completed”, “Open”],
type: “pie”,
marker: { colors: ["#5eba7d", “#1565c0”] },
color: “#fff”,
},
]}
layout={{
width: 320,
height: 240,
color: “#fff”,
paper_bgcolor: “rgba(0,0,0,0)”,
font_color: “#fff”
}}
/>
As you can see, I’ve tried “color” and now “font_color” or “fontColor” but it doesn’t change the color:
Any idea what I’m missing?
Thanks again!
Chris.
Nevermind. I got it. Thought about the fact that it’s “layout.font.color” so obviously font must take an object rather than a string.
layout={{
width: 320,
height: 240,
color: “#fff”,
paper_bgcolor: “rgba(0,0,0,0)”,
font: {
color: “#fff”
}
}}
Thanks again.
Chris