Charts: Having the area below a line graph be gradient layer instead of background color

[BrandonShega]

Is it possible to have the area underneath a line chart to be a gradient layer as opposed to just a solid color? We were also wondering if on a line chart if we could add a drop shadow below the line. Thanks!

[danielgindi]

@BrandonShega Set the backgroundColor to UIColor.transparentColor and opaque to false

[BrandonShega]

But won't that just leave it entirely transparent rather than fading from a color to transparent?

[danielgindi]

@BrandonShega The background gradient is your job. You can even put your girlfriend's face there if you want. Put whatever you want behind the chart.

[BrandonShega]

No, no, I don't mean behind the chart, I just mean the area below the actual line graph. It's hard to explain here are some images that maybe will help.

Gradient Example:

Shadow Example:

[danielgindi]

@BrandonShega You mean the fill color. That's not supported yet, but it's planned.

[BrandonShega]

Ok great, thank you so much! Loving the library, I added drop shadow to the circles and lines for line graph, I'll have to make a pull request here some day.

[Halkyonbird]

Nice library, but really it would be cool to add fill color gradient support!

[fkosec]

It would be awesome if this got added to the project.

[danielgindi]

Yes friends, this happened :-)

[rubenwardy]

For future readers, this is the fill property on LineDataSets (sorry for bumping, this is the only result I found)

Swift

datset.fill = ChartFill.fill(withColor: color.withAlphaComponent(0.8))

Objective C

dataset.fill = [ChartFill fillWithColor:[color colorWithAlphaComponent:0.8]];

[timotiuserick]

is it added yet ?
need it so much :(

[dawigr]

@timotiuserick
let coloTop = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.8).cgColor
let colorBottom = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.1).cgColor
let gradientColors = [coloTop, colorBottom] as CFArray // Colors of the gradient
let colorLocations:[CGFloat] = [0.7, 0.0] // Positioning of the gradient
let gradient = CGGradient.init(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: gradientColors, locations: colorLocations) // Gradient Object
lineChartDataSet.fill = Fill.fillWithLinearGradient(gradient!, angle: 90.0) // Set the Gradient
lineChartDataSet.drawFilledEnabled = true // Draw the Gradient

[timotiuserick]

@davigr wow Thank you so much!!

[abhishekgautam101]

let gradientColors = [UIColor(red: 141, green: 133, blue: 220, alpha: 0), UIColor(red: 230, green: 155, blue: 210, alpha: 0)] as CFArray // Colors of the gradient
let colorLocations:[CGFloat] = [1.0, 0.0] // Positioning of the gradient
let gradient = CGGradient.init(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: gradientColors, locations: colorLocations)
line1.fill = Fill.fillWithLinearGradient(gradient!, angle: 90.0) // Set the Gradient
line1.drawFilledEnabled = true /

this is not working!

[dawigr]

Hey @abhiccc5
Check it out my chart view with all configs
https://github.com/davigr/BLEDemo/blob/master/BLEDemo/Application/Details/RSSIChartView.swift

There are 2 methods that sets gradients 'getGradientFilling', 'setGradientBackground'

[abhishekgautam101]

// Setting fill gradient color
let coloTop = UIColor(red: 141/255, green: 133/255, blue: 220/255, alpha: 0.8).cgColor
let colorBottom = UIColor(red: 230/255, green: 155/255, blue: 210/255, alpha: 0.1).cgColor
// Colors of the gradient
let gradientColors = [coloTop, colorBottom] as CFArray
// Positioning of the gradient
let colorLocations: [CGFloat] = [0.7, 0.0]
// Gradient Object
let gradient = CGGradient.init(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: gradientColors, locations: colorLocations)!
line1.fill = Fill.fillWithLinearGradient(gradient, angle: 90.0)
line1.drawFilledEnabled = true

Got it working correctly! Thanks to @davigr 👍

[Aanchal96]

@BrandonShega Hey! Can you please help me in adding the drop shadow under the line and circles as shown in the pictures you shared.

[abhishekgautam101]

Hey @Aanchal96 , use this code snippet to get shadow under the line and circles in your graph.

func setChart(dataPoints: [String], values: [Double]) {
mChart.noDataText = "No data available!"
for i in 0..<values.count {
print("chart point : (values[i])")
let dataEntry = ChartDataEntry(x: Double(i), y: values[i])
dataEntries.append(dataEntry)
}
let line1 = LineChartDataSet(values: dataEntries, label: "Units Consumed")
line1.colors = [NSUIColor.blue]
line1.mode = .cubicBezier
line1.cubicIntensity = 0.2

    let gradient = getGradientFilling()
    line1.fill = Fill.fillWithLinearGradient(gradient, angle: 90.0)
    line1.drawFilledEnabled = true

    let data = LineChartData()
    data.addDataSet(line1)
    mChart.data = data
    mChart.setScaleEnabled(false)
    mChart.animate(xAxisDuration: 1.5)
    mChart.drawGridBackgroundEnabled = false
    mChart.xAxis.drawAxisLineEnabled = false
    mChart.xAxis.drawGridLinesEnabled = false
    mChart.leftAxis.drawAxisLineEnabled = false
    mChart.leftAxis.drawGridLinesEnabled = false
    mChart.rightAxis.drawAxisLineEnabled = false
    mChart.rightAxis.drawGridLinesEnabled = false
    mChart.legend.enabled = false
    mChart.xAxis.enabled = false
    mChart.leftAxis.enabled = false
    mChart.rightAxis.enabled = false
    mChart.xAxis.drawLabelsEnabled = false

}

/// Creating gradient for filling space under the line chart
private func getGradientFilling() -> CGGradient {
    // Setting fill gradient color
    let coloTop = UIColor(red: 141/255, green: 133/255, blue: 220/255, alpha: 1).cgColor
    let colorBottom = UIColor(red: 230/255, green: 155/255, blue: 210/255, alpha: 1).cgColor
    // Colors of the gradient
    let gradientColors = [coloTop, colorBottom] as CFArray
    // Positioning of the gradient
    let colorLocations: [CGFloat] = [0.7, 0.0]
    // Gradient Object
    return CGGradient.init(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: gradientColors, locations: colorLocations)!
}

[cerupcat]

@abhishekgautam101 is this supposed to create a drop shadow? I copied your code but it justs created a basic gradient - not a drop shadow. Are drop shadows supported?

[pradweep]

@danielgindi Hi daniel I need some help regarding the filling gradient color for the linecharts. I am struggling hard to how to fill gradient colors for the different data sets as shown in the below screenshot. Can you please provide me the resolution asap.