ChartsOrg / ChartsOrg/Charts

How to Fill Area Between Two Lines with Different Colors Based on Line Intersection

Open
#5,195 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Swift
Stars
28k
Forks
6k
PR merge metrics
No merged PRs in 30d

Description

Hello,

I am trying to create a line chart using DGCharts where I need to fill the area between two lines with different colors based on which line is higher at any given point on the x-axis.

**Details:**
I have two data sets representing two lines on the chart.
My goal is to:
Fill the area between these two lines.

I’ve tried using a custom FillFormatter and overriding the fill logic, but I’ve encountered difficulties getting the correct areas to fill between the lines.
In my current implementation, the fill area doesn’t cover the space correctly, and sometimes it fills the wrong segments.

**Question:**
What would be the best approach to achieve this effect in DGCharts?
Are there any examples or best practices to follow for creating such a fill effect?

The screenshot is what I'm trying to do:
![Simulator Screenshot - iPhone 15 Pro - 2024-08-22 at 10 41 02](https://github.com/user-attachments/assets/c6ce8055-8121-4965-98c5-00f00622dca4)

Contributor guide

Open the contributing guide

Research direction

The issue names DGCharts and custom FillFormatter but no repository files, tests, or entry points. Start by reviewing DGCharts line-chart fill and FillFormatter examples, then determine whether the requested behavior is supported. Done would be a documented, reproducible approach for filling the regions between intersecting lines with the correct colors.

Written by the indexing model from the issue text.

Assessment

Tech stack
swift
Domain
data-visualization, mobile
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.