It seems VictoryGroup is not passing the theme prop through to its container. I can verify, in React tools, that the VictoryVoronoiContainer is given the default theme. This then means that it's tooltips also receive the default theme.
<VictoryChart theme={customTheme}>
<VictoryGroup containerComponent={<VictoryVoronoiContainer />}>
@GreenGremlin thanks for pointing this out.
It looks like VictoryVoronoiContainer is also not passing theme to its label component.
If I don't override the labelComponent, the tooltip will not get the custom theme.
Here the tooltip will not get the customTheme.
<VictoryVoronoiContainer
theme={customtheme}>
...
I have to do this:
<VictoryVoronoiContainer
labelComponent={<VictoryTooltip theme={customTheme} />}
theme={customtheme}>
...
This issue is still not fixed. Or at least the second part, VictoryVoronoiContainer is not passing the theme to it's labelComponent.
Sorry, VictoryGroup is not passing theme to its containerComponent. I still have to do this.
<VictoryChart
theme={myTheme}
>
<VictoryGroup
containerComponent={(
<VictoryVoronoiContainer
theme={myTheme}
@GreenGremlin sorry I closed this one prematurely. I'll re-open. In the meantime, does it work if you put your container component on VictoryChart? We've been seeing odd behavior when container are used as group components rather than top level svg
Is this what you're asking? If so then yes, VictoryChart is passing it's theme to it's containerComponent. This will not work for me though, I need to use a group.
<VictoryChart
theme={myTheme}
containerComponent={(
<VictoryVoronoiContainer
theme={myTheme}
I originally reported this in the Gitter conversation, but am adding this here since I believe they're the same root cause.
Both default grayscale and material themes have a tooltip style object that inherits from baseLabelStyles. However, when I make changes to this style object for my custom theme, nothing changes.
Changes to theme does not appear in Tooltip:
<VictoryChart
theme={mytheme}
>
<VictoryBar
data={data} x={x} y={y} labelComponent={<VictoryTooltip />}
/>
</VictoryChart>
I'm not using a container within VictoryChart. The only thing I have nested within VictoryChart is VictoryBar with a VictoryTooltip labelComponent. The theme is not propagating in VictoryTooltip. When I explicitly pass the theme prop in VictoryTooltip, the custom theme is applied to the flyoutStyle object, but not the style object that controls the label within the tooltip.
Changes to flyoutStyle within tooltip in theme is applied, but not to the label within the tooltip:
<VictoryChart
theme={mytheme}
>
<VictoryBar
data={data} x={x} y={y} labelComponent={<VictoryTooltip theme={mytheme} />}
/>
</VictoryChart>
I am seeing the same issue that @bellawoo pointed out. @boygirl Would you be able to provide a workaround other than passing the custom theme to the
Thanks!
Most helpful comment
I originally reported this in the Gitter conversation, but am adding this here since I believe they're the same root cause.
Both default grayscale and material themes have a tooltip style object that inherits from baseLabelStyles. However, when I make changes to this style object for my custom theme, nothing changes.
Changes to theme does not appear in Tooltip:
I'm not using a container within VictoryChart. The only thing I have nested within VictoryChart is VictoryBar with a VictoryTooltip labelComponent. The theme is not propagating in VictoryTooltip. When I explicitly pass the theme prop in VictoryTooltip, the custom theme is applied to the flyoutStyle object, but not the style object that controls the label within the tooltip.
Changes to flyoutStyle within tooltip in theme is applied, but not to the label within the tooltip: