Fill color in Area Series

[piyushsinha24]

I used this:

<AnimatedAreaSeries dataKey="Supply" data={Supply} {...accessors} fill={"rgb(248, 228, 53)"}/>

The rgb value shows in the body but I get a diff colour stroke on top by default. How to get rid of that default bluish color? Its kind of urgent. Please help asap.

[piyushsinha24]

Figured out the solution. stroke color can be set using line props. Still I have one more issue. How to match glyph color with Area Series color. Please guide asap.

[williaster]

Hey @piyushsinha24, another approach to setting colors is by defining the colors in the chart theme. This can then be used by all of the components including tooltip glyphs. You can see an example here, where the colors array will be mapped to series dataKeys on the bars and in the tooltip.

If you don't want to define a full on theme, you could extend the light theme and just override the colors like

import { lightTheme, XYChart } from '@visx/xychart'`;

const customTheme = {
  ...lightTheme,
  // order should match XYChart child series render order 
  colors: [...myColors],
};

// render
() => (
  <XYChart theme={customTheme}>{...}</XYChart>
)

[piyushsinha24]

Thanks for the reply. It works just fine.

[VigneshTrantor]

Thank you so much @williaster . This also helped to solve the tooltip color issue I was facing for the last 3 days.

[d3x42]

Thank you for the solution (it helps me with tooltip dots). Would be great to see it as part of the doc!