ChartsOrg / ChartsOrg/Charts

How to use Charts to draw StreamGraph ?

Open
#4,851 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

I want to draw a stream graph like this

[![enter image description here][1]][1]

I had already follow the [LineChartFillDemo][2], and also saw the [issue #4037][2] But it seems that the background line will still gone like this

[![enter image description here][3]][3]

but I want the rest of the streamgraph can have grid background.
this is what I'm done now.

this is what I'm done now

```swift
import UIKit
import Charts

class ViewController: UIViewController, ChartViewDelegate {

@IBOutlet var chartView: LineChartView!

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
self.title = "Filled Line Chart"

chartView.delegate = self

// chartView.backgroundColor = .white
chartView.gridBackgroundColor = .white // UIColor(red: 51/255,
// green: 181/255,
// blue: 229/255,
// alpha: 150/255)
chartView.drawGridBackgroundEnabled = true

chartView.drawBordersEnabled = true

chartView.chartDescription.enabled = false

chartView.pinchZoomEnabled = false
chartView.dragEnabled = true
chartView.setScaleEnabled(true)

chartView.legend.enabled = false

chartView.xAxis.enabled = false

let leftAxis = chartView.leftAxis
leftAxis.axisMaximum = 900
leftAxis.axisMinimum = -250
leftAxis.drawAxisLineEnabled = false

chartView.rightAxis.enabled = false

setDataCount(Int(30), range: UInt32(30))
}

func setDataCount(_ count: Int, range: UInt32) {
let yVals1 = (0.. ChartDataEntry in
let val = Double(arc4random_uniform(range) + 50)
return ChartDataEntry(x: Double(i), y: val)
}
let yVals2 = (0.. ChartDataEntry in
let val = Double(arc4random_uniform(range) + 450)
return ChartDataEntry(x: Double(i), y: val)
}
let yVals3 = (0.. ChartDataEntry in
let val = Double(arc4random_uniform(range) + 600)
return ChartDataEntry(x: Double(i), y: val)
}

let set1 = LineChartDataSet(entries: yVals1, label: "DataSet 1")
set1.axisDependency = .left
set1.setColor(UIColor(red: 255/255, green: 241/255, blue: 46/255, alpha: 1))
set1.drawCirclesEnabled = false
set1.lineWidth = 2
set1.circleRadius = 3
set1.fillAlpha = 1
set1.drawFilledEnabled = true
set1.fillColor = .red
set1.highlightColor = UIColor(red: 255/255, green: 117/255, blue: 117/255, alpha: 1)
set1.drawCircleHoleEnabled = false
set1.fillFormatter = DefaultFillFormatter { _,_ -> CGFloat in
return CGFloat(self.chartView.leftAxis.axisMaximum)
}

let set2 = LineChartDataSet(entries: yVals2, label: "DataSet 2")
set2.axisDependency = .left
set2.setColor(UIColor(red: 255/255, green: 241/255, blue: 46/255, alpha: 1))
set2.drawCirclesEnabled = false
set2.lineWidth = 2
set2.circleRadius = 3
set2.fillAlpha = 1
set2.drawFilledEnabled = true
set2.fillColor = .green
set2.highlightColor = UIColor(red: 244/255, green: 117/255, blue: 117/255, alpha: 1)
set2.drawCircleHoleEnabled = false
set2.fillFormatter = DefaultFillFormatter { _,_ -> CGFloat in
return CGFloat(self.chartView.leftAxis.axisMaximum)
}

let set3 = LineChartDataSet(entries: yVals3, label: "DataSet 3")
set3.axisDependency = .left
set3.setColor(UIColor(red: 255/255, green: 241/255, blue: 46/255, alpha: 1))
set3.drawCirclesEnabled = false
set3.lineWidth = 2
set3.circleRadius = 3
set3.fillAlpha = 1
set3.drawFilledEnabled = true
set3.fillColor = .white
set3.highlightColor = UIColor(red: 244/255, green: 117/255, blue: 117/255, alpha: 1)
set3.drawCircleHoleEnabled = false
set3.fillFormatter = DefaultFillFormatter { _,_ -> CGFloat in
return CGFloat(self.chartView.leftAxis.axisMaximum)
}

let data: LineChartData = [set1, set2, set3]
data.setDrawValues(false)

chartView.data = data
}

}

```

and it showed like this

[![enter image description here][4]][4]

the line above green area was disappear because I use white cover it, and I dont know whether have better alternative way to do it.

Actually I want to change the fillformater, but each set only can setup one fillformatter.

[1]: https://i.stack.imgur.com/CSXr9m.png
[2]: https://github.com/danielgindi/Charts/issues/4037
[3]: https://i.stack.imgur.com/10PSTm.png
[4]: https://i.stack.imgur.com/NoQxBm.png

Contributor guide

Open the contributing guide

Research direction

Start with the ViewController example, LineChartView configuration, LineChartFillDemo, and issue #4037 referenced in the report. Trace how multiple filled LineChartDataSet instances and their fillFormatter values are rendered; done means establishing whether the requested streamgraph background behavior is supported and identifying the relevant change or limitation.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, swift
Domain
mobile-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.