It seems that our current default theme applied to StackCharts sets the tooltip fill and stroke to #EDEDED making the text unreadable.
<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} />} />
<ChartBar data={chartData} labelComponent={<ChartTooltip style={{ fill: '#FFF' }} />} />
Would be nice to shore this up in PF in the future though...
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...