Search code examples
swiftxcodeios-charts

How to implement this stacked line chart in MPAndroidCharts or iOS-Charts


I have a number of charts/graphs created with the ported MPAndroidCharts project iOS-Charts by DanielGindi but I'm getting a request and I'm just not sure it's technically possible with things as they exist today.

I have used gradients but not sure if there's a way to kind of have it just be a 2 sided/colored gradient instead of a gradual fade. I have not created or seen an example of a dotted line coming through the existing chart but assuming zoom isn't a possibility I could hypothetically float a view over the top of it but I'd definitely prefer to have it in the native charts code/implementation.

The first graph is showing how much a user plans to have at retirement, the two shades of green represent different sources of money, the dotted line represents their spending from retirement to their estimated time of death.

The second graph is showing the gap between how much a user plans to have at retirement and how much we project they're missing compared to what they have and how that will look across the time from retirement to estimated death.

Thoughts?

Graph showing how much a user plans to have at retirement, the two shades of green represent different sources of money, the dotted line represents their spending from retirement to their estimated time of death

Graph showing the gap between how much a user plans to have at retirement, and how much we project they'll have


Solution

  • It looks like a line chart with three lines and each with a solid fill.

    In the top one, the dashed line graph has a white stroke and no fill, but in the bottom one, it has a black stroke and gray fill.

    In the top one, the dashed line should be z-ordered to be on top, but in the bottom one, it should be z-ordered to be on the bottom.