Search code examples
swiftchartsios-charts

ios-charts Charts for Swift - purposely bleed/overflow chart bars


I'm using a Bar Chart that I'm trying to make look like a design. The design's bars overflow a bit at the bottom and have a transparency gradient on them. I can't find any property that you can use for this and I guess I'll have to override somewhere. I've also tried to draw layers on top of the graph at the bars positions/bounds without success.

I tried overriding the BarChartRenderer and change the Y-positions, but since the graph is supposed to be "scrollable" by default it clips the bar. I've already disabled the scrolling/moving/zooming functions because I don't need them:

doubleTapToZoomEnabled = false
highlightPerDragEnabled = false
highlightPerTapEnabled = false
clipValuesToContentEnabled = false

graph - i want right


Solution

  • Solved it by drawing my own layers over the bars and then remove the old bars because of their anti-aliasing. This way it will be easier to implement the gradient too, and it works because you won't be able to move/scale the chart.

        let bottomY = self.contentRect.maxY - leftAxis.gridLineWidth
        for (_, bar) in self.barData!.dataSets.enumerated() {
            let layer = CALayer(),
            barBounds = self.getBarBounds(entry: bar.entryForIndex(0)! as! BarChartDataEntry),
            // 30 extra height at bottom
            frame = CGRect(x: barBounds.minX, y: barBounds.minY, width: barBounds.width, height: (bottomY - barBounds.minY) + 30)
            // Set the new frame size, Z position and background
            layer.frame = frame
            layer.zPosition = 10
            layer.backgroundColor = bar.color(atIndex: 0).cgColor
            // Add the new bar layer and remove old bar
            self.layer.addSublayer(layer)
            bar.clear()
        }