How to use Charts to draw StreamGraph ?
- 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
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