CODEWITHSUNDEEP
iosswiftchartsdrawingios-charts
Camon
Camon

Reputation: 1043

Change Drawing Order for Combined Charts in iOS Charts

I am using the charts framework from Danielgindi to present data to the user. What I am wanting to do is display two charts on top of each other using CombinedChartView. The two charts are a BarChartDataSet and LineChartDataSet. I can successfully display both sets of data, however I can't seem to control the drawing order. The bar BarChartDataSet is always drawn behind the LineChartDataSet. I want this order to be reversed and have the LineChartDataSet in the back (including any fills that I apply to it).

My Question

How can I change the draw order for CombinedChartView to make the line charts in the back and not front?

Here is my code:

// barDataEntries and lineDataEntries are generated in a different section and are not relevant to this question. Any data will do.
// barDataEntries is of type [BarChartDataEntry]()
// lineDataEntries is of type [ChartDataEntry]()
let barChartSet = BarChartDataSet(yVals: barDataEntries, label: "The Bars")
let lineChartSet = LineChartDataSet(yVals: lineDataEntries, label: "The Line")
barChartSet.barShadowColor = UIColor(red: 1, green: 0, blue: 0, alpha: 0)  // If alpha is > 0, then grey bars will appear.

// Cosmetic changes for the line chart
lineChartSet.mode = .CubicBezier
lineChartSet.lineWidth = 5.0
lineChartSet.drawCirclesEnabled = false
lineChartSet.drawFilledEnabled = true
lineChartSet.colors = [UIColor(red: 0, green: 0, blue: 1, alpha: 0.0)]
lineChartSet.fillColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1.0)
lineChartSet.fillAlpha = 0.8

// Organizing data for statsChartViewController
let data = CombinedChartData(xVals: xAxis)
data.lineData = LineChartData(xVals: xAxis, dataSets: [lineChartSet])
data.barData = BarChartData(xVals: xAxis, dataSets: [barChartSet])

// statsChartViewController is of type CombinedChartView
statsChartViewController.data = data
statsChartViewController.leftAxis.axisMinValue = 0

Here is what I am getting:

Bar and line chart view

Upvotes: 2

Views: 2421

Answers (1)

Camon
Camon

Reputation: 1043

After looking though the source code, I found a solution that allows you to change the draw order. The class CombinedChartView has a public enum that is responsible for the draw order:

public enum DrawOrder: Int
{
    case Bar       // 0
    case Bubble    // 1
    case Line      // 2
    case Candle    // 3
    case Scatter   // 4
}

You can change the draw order by setting an array of Ints for drawOrder in the order you want the objects to be drawn. In the example below (taken from the code above), the bars will be in front of the lines:

// 2 is the line and 0 is the bar. 2 is drawn first, then 0 follows.
statsChartViewController.drawOrder = [2, 0]
statsChartViewController.data = data

This is the only modification that needs to be made. One thing important to remember, set the draw order before you set the data. If you don't, the draw order will remain the same as before. Here are the new results:

enter image description here

Upvotes: 9

Related Questions