[charts] Transparent fills in area line charts overlap causing color mixing issues

[ohmsl]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/blazing-hill-sxq2zg

Current Behavior

In the current implementation of the line chart, I have adjusted the area fill color to include a transparent fill. This can be seen in the screenshot below. The issue arises where the areas corresponding to two different lines intersect. The transparency of these fills results in the colors mixing together, making it difficult to distinguish between the two lines in certain sections of the chart.

Current behavior screenshot:

Expected Behavior

Ideally, the areas should remain visually distinct even when overlapping. The screenshot below illustrates the desired outcome where each area's color does not blend into the other, which was temporarily achieved by stacking the areas. However, stacking is not a viable solution in this case, as the data series do not cumulatively represent a total value.

Expected behavior screenshot:

Suggested Fix

One potential solution could involve the use of SVG clip paths, which have been effectively utilized in other parts of the chart to manage overlapping visual elements. Implementing clip paths could help maintain the visual integrity of each area without the colors merging.

Context

This issue is important as the chart is intended to display several arbitrary values that do not collectively contribute to a total but still need to support transparent area fills. Achieving clear visual differentiation between overlapping areas is crucial for accurate data representation.

Context screenshot:

Environment

N/A

Search Keywords

• Transparent area chart
• Chart color overlap
• SVG clip path in charts

[alexfauquette]

General concern

For other user landing on this issue: Using multiple areas without staking them is not a recommended practice

Proposal

In your specific use case of acquisition compared to lead, it can make sens.

You could remove opacity by using lighter colors. In your example the dark blue with opacity over the white background results in a light blue. You could get the RGB of this color to get area fill color without opacity

If you need to see the grid, you will need move it to the top of the chart by using composition.

I don't see a silver bullet solution to your issue because the color mixing "bug" is the correct behavior. The opacity lets you see what is behind the component, so it mixes colors. Then you need to chose between:

• having the area on top of the grid, but the color are mixing
• having fixed colors, but you lose the transparency effect

[ohmsl]

Appreciate the proposal. It did feel a bit fishy using area charts in this way and I may just opt out of it entirely and separate the values.

Just a note about your proposed workaround by copying the RGB of the lighter colour caused by the low opacity on a white background: the chart actually clips the area of the intersecting line:

That said, I likely will opt out of using area charts in this way and instead have a lead breakdown stack and obviously separating unrelated values into separate charts.

Thank you!

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@ohmsl: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.