Victory: VictoryGroup is not passing the theme prop to its container

Created on 23 Mar 2017  路  8Comments  路  Source: FormidableLabs/victory

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 />}>
bug

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:

<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>

All 8 comments

@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 component?
Thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

esutton picture esutton  路  6Comments

tylermassey picture tylermassey  路  5Comments

seddonm1 picture seddonm1  路  5Comments

icd2k3 picture icd2k3  路  3Comments

robinwkurtz picture robinwkurtz  路  3Comments