Patternfly-react: PF4: StackChart - setting the default tooltip background color

[priley86]

It seems that our current default theme applied to StackCharts sets the tooltip fill and stroke to #EDEDED making the text unreadable.

(changing our first StackChart example to reproduce this):

    <Chart
      legendData={[{ name: 'Cats' }, { name: 'Birds' }, { name: 'Dogs' }, { name: 'Mice' }]}
      legendOrientation="vertical"
      legendPosition="right"
      height={250}
      padding={{
        bottom: 50,
        left: 50,
        right: 200, // Adjusted to accomodate legend
        top: 50
      }}
      width={600}
    >
      <ChartStack domainPadding={{x: [10, 2]}}>
        <ChartBar data={[{ name: 'Cats', x: '2015', y: 1, label: 'Abcd' }, { name: 'Cats', x: '2016', y: 2 }, { name: 'Cats', x: '2017', y: 5 }, { name: 'Cats', x: '2018', y: 3 }]} labelComponent={<ChartTooltip />} />
        <ChartBar data={[{ name: 'Dogs', x: '2015', y: 2 }, { name: 'Dogs', x: '2016', y: 1 }, { name: 'Dogs', x: '2017', y: 7 }, { name: 'Dogs', x: '2018', y: 4 }]} />
        <ChartBar data={[{ name: 'Birds', x: '2015', y: 4 }, { name: 'Birds', x: '2016', y: 4 }, { name: 'Birds', x: '2017', y: 9 }, { name: 'Birds', x: '2018', y: 7 }]} />
        <ChartBar data={[{ name: 'Mice', x: '2015', y: 3 }, { name: 'Mice', x: '2016', y: 3 }, { name: 'Mice', x: '2017', y: 8 }, { name: 'Mice', x: '2018', y: 5 }]} />
      </ChartStack>
    </Chart>

You can pass a custom theme object to ChartTooltip but that does not seem to work well here either.

    const theme = {
      ...ChartBaseTheme,
      tooltip: {
        ...ChartBaseTheme.tooltip,
        style: {
          ...ChartBaseTheme.tooltip.style,
          fill: '#FFF'
        }
      }
    };
...
<ChartBar data={chartData} labelComponent={<ChartTooltip theme={theme} />} />

The current workaround which seems to work for the moment:

<ChartBar data={chartData} labelComponent={<ChartTooltip style={{ fill: '#FFF' }} />} />

Would be nice to shore this up in PF in the future though...

[priley86]

I've custom tailored this a bit further due to our larger/wide responsive graph. Just noting this for later when we review this again w/ StackChart tooltips, wide responsive variations will help!

https://github.com/RedHatInsights/curiosity-frontend/pull/35

[dlabrecq]

dup of https://github.com/patternfly/patternfly-react/issues/2496

[priley86]

confirmed this resolve the theme issue downstream as well. So upgrading to @patternfly/[email protected] fixes it!

thanks @dlabrecq 😸