Gradient Fill in Swift for iOS-Charts

Question

I am trying to create a nice gradient fill as seen in the demos on the ios-charts page. However, I cannot figure this out in swift vs obj-c. Here is the obj-c code:

NSArray *gradientColors = @[
                    (id)[ChartColorTemplates colorFromString:@"#00ff0000"].CGColor,
                    (id)[ChartColorTemplates colorFromString:@"#ffff0000"].CGColor
                    ];
CGGradientRef gradient = CGGradientCreateWithColors(nil, (CFArrayRef)gradientColors, nil);

set1.fillAlpha = 1.f;
set1.fill = [ChartFill fillWithLinearGradient:gradient angle:90.f];

Now here is my version of that in swift:

    let gradColors = [UIColor.cyanColor().CGColor, UIColor.init(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.0)]
    let colorLocations:[CGFloat] = [0.0, 1.0]
    let gradient = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), gradColors, colorLocations)

What I am missing is the : Chart Fill fillWithLinearGradient

I can't find the fillWithLinearGradient in the pod anywhere so I am a bit confused.

Thanks in advance for any help! Rob

Check out the implementation of ChartFill: https://github.com/danielgindi/ios-charts/blob/607c4515d92b9fa5b15192981c3cc4f8bb38f01b/Charts/Classes/Utils/ChartFill.swift There's an init that accepts a linearGradient and angle. I believe @matt's answer to be correct. — Stephen, Feb 01 '16 at 14:57
@Stephen, in the LineChartDataSet class there is no .fill. However there is a fillFormatter but clearly in my noobish state, I am not sure how to make that work. — throb, Feb 01 '16 at 16:23
`LineChartDataSet` is a subclass of `LineRadarChartDataSet`. `LineRadarChartDataSet` does have a public fill variable, so it should be available to you. — Stephen, Feb 01 '16 at 20:54
Hi, sorry I have the same question and in your code what does set1 stand for? — VAAA, May 10 '16 at 01:05

Michael · Accepted Answer · 2016-12-12T16:42:26.027

48

This works perfectly (Swift 3.1 and ios-charts 3.0.1)

let gradientColors = [UIColor.cyan.cgColor, UIColor.clear.cgColor] 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) // Gradient Object
yourDataSetName.fill = Fill.fillWithLinearGradient(gradient!, angle: 90.0) // Set the Gradient
set.drawFilledEnabled = true // Draw the Gradient

Result

edited Dec 12 '16 at 16:42

answered May 25 '16 at 20:09

Michael

9,639
3
64
69

How to get curved effect in graph ? – Kirit Vaghela Jul 10 '17 at 12:21
@KiritVaghela I don't remember exactly, you'll have to check the documentation to find that. (https://github.com/danielgindi/Charts) You may need to use the `cubic` option or a `bezier` option. – Michael Jul 10 '17 at 18:30
4

@KiritVaghela yourSet.mode = .cubicBezier // smooth line chart – Włodzimierz Woźniak Aug 01 '17 at 11:17
I am new to charts...how to implement this code with line charts? – jayant rawat Mar 17 '20 at 09:45

score 8 · Answer 2 · answered Nov 17 '20 at 18:55

8

For Swift 5 use the following:

yourDataSetName.fill = LinearGradientFill(....
or
yourDataSetName.fill = ColorFill(...

More details you can read here: Charts

answered Nov 17 '20 at 18:55

Ihor Chernysh

446
4
5

Updated recently and had an error with this. These classes fixed it for me. – Mark Feb 27 '22 at 05:17

score 6 · Answer 3 · answered Feb 01 '16 at 21:15

6

I believe this is the code that you are looking for. You should be able to use the same ChartFill class in Swift to set set1.fill.

let gradColors = [UIColor.cyanColor().CGColor, UIColor.clearColor.CGColor]
let colorLocations:[CGFloat] = [0.0, 1.0]
if let gradient = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), gradColors, colorLocations) {
    set1.fill = ChartFill(linearGradient: gradient, angle: 90.0)
}

answered Feb 01 '16 at 21:15

Stephen

1,154
11
27

Thank you. I did not think to put that in { }. However, when I use ChartFill the error I get is: unresolved identifier 'ChartFill' – throb Feb 02 '16 at 14:42
it should be ChartFill.fillWithLinearGradient(...) – jtmwanakhu Mar 16 '16 at 22:56
Hi, what does set1 stands for? – VAAA May 10 '16 at 01:06
@VAAA: set1 was just a variable name in this example. – Stephen May 11 '16 at 15:31

score 3 · Answer 4 · answered Oct 16 '18 at 17:21

For swift4

let colorTop =  UIColor(red: 255.0/255.0, green: 149.0/255.0, blue: 0.0/255.0, alpha: 1.0).cgColor
let colorBottom = UIColor(red: 255.0/255.0, green: 94.0/255.0, blue: 58.0/255.0, alpha: 1.0).cgColor

let gradientColors = [colorTop, colorBottom] as CFArray
let colorLocations:[CGFloat] = [0.0, 1.0]
let gradient = CGGradient.init(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: gradientColors, locations: colorLocations) // Gradient Object
yourDataSetName.fill = Fill.fillWithLinearGradient(gradient!, angle: 90.0)

it appears you also have to add `yourDataSetName.drawFilledEnabled = true` — kite_n_code, Dec 14 '18 at 05:03

score 2 · Answer 5 · answered Jun 22 '22 at 07:26

2

Fill.fillWithLinearGradiant has been updated to LinearGradientFill

answered Jun 22 '22 at 07:26

Muhammad Aakif

193
2
5

score 0 · Answer 6 · answered Feb 10 '16 at 22:03

0

Make sure to use the latest version of ios-charts. If you use CocoaPods to install ios-charts change this:

pod 'Charts'

to this

pod 'Charts', '~> 2.2'

answered Feb 10 '16 at 22:03

cronenberg

97
1
9

I just had to wait for that rev I guess :) I still don't get the gradient fill but at least the error doesn't rear its ugly head. Thank you. – throb Feb 25 '16 at 16:21
1

@throb you probably have solved it already, but just in case: I copy pasted your code and didn't get gradient either, and turns out the issue was that the second color was not sent in as .CGColor. Adding this solved it for me. let gradColors = [UIColor.cyanColor().CGColor, UIColor.init(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.0).CGColor] – ClockWise Mar 11 '16 at 06:08
Sweet! Thanks! I ended up not using the gradient but I will now :) Cheers!! – throb Mar 11 '16 at 15:22

Gradient Fill in Swift for iOS-Charts

6 Answers6

Linked

Related