Pattern fill not working

[skuske]

I just found that 'pattern fills' do not seem to work (sample was https://www.highcharts.com/ios/demo/accessible-pie).

The patterns do not appear - instead the areas are filled black:

Code:

   HIChartView *chartView = [[HIChartView alloc] initWithFrame:self.view.bounds];

    chartView.plugins = @[ @"accessibility", @"pattern-fill" ];

    HIOptions *options = [[HIOptions alloc]init];

    HIChart *chart = [[HIChart alloc]init];
    chart.type = @"pie";

    HITitle *title = [[HITitle alloc]init];
    title.text = @"Desktop screen readers";

    HISubtitle *subtitle = [[HISubtitle alloc]init];
    subtitle.text = @"Click on point to visit official website";

    HIPlotOptions *plotoptions = [[HIPlotOptions alloc]init];
    plotoptions.series = [[HISeries alloc] init];
    plotoptions.series.point = [[HIPoint alloc] init];
    plotoptions.series.point.events = [[HIEvents alloc] init];
    plotoptions.series.point.events.click = [[HIFunction alloc] initWithJSFunction:@"function () { window.location.href = this.website; }"];
    plotoptions.series.cursor = @"pointer";

    HIPie *pie = [[HIPie alloc] init];
    pie.name = @"Percentage usage";
    pie.borderColor = [[HIColor alloc] initWithHexValue:@"2f7ed8"];

    HIData *data1 = [[HIData alloc] init];
    data1.name = @"JAWS";
    data1.y = @30.2;
    data1.color = [[HIColor alloc] initWithName:@"url(#highcharts-default-pattern-0)"];
    data1.definition = @"This is the most used desktop screen reader";
    HIData *data2 = [[HIData alloc] init];
    data2.name = @"ZoomText";
    data2.y = @22.2;
    data2.color = [[HIColor alloc] initWithName:@"url(#highcharts-default-pattern-1)"];
    HIData *data3 = [[HIData alloc] init];
    data3.name = @"Window-Eyes";
    data3.y = @20.7;
    data3.color = [[HIColor alloc] initWithName:@"url(#highcharts-default-pattern-2)"];
    HIData *data4 = [[HIData alloc] init];
    data4.name = @"NVDA";
    data4.y = @14.6;
    data4.color = [[HIColor alloc] initWithName:@"url(#highcharts-default-pattern-4)"];
    HIData *data5 = [[HIData alloc] init];
    data5.name = @"VoiceOver";
    data5.y = @7.6;
    data5.color = [[HIColor alloc] initWithName:@"url(#highcharts-default-pattern-3)"];
    HIData *data6 = [[HIData alloc] init];
    data6.name = @"System Access To Go";
    data6.y = @1.5;
    data6.color = [[HIColor alloc] initWithName:@"url(#highcharts-default-pattern-7)"];
    HIData *data7 = [[HIData alloc] init];
    data7.name = @"ChromeVox";
    data7.y = @0.3;
    data7.color = [[HIColor alloc] initWithName:@"url(#highcharts-default-pattern-6)"];
    HIData *data8 = [[HIData alloc] init];
    data8.name = @"Other";
    data8.y = @2.9;
    data8.color = [[HIColor alloc] initWithName:@"url(#highcharts-default-pattern-5)"];

    pie.data = [[NSArray alloc] initWithObjects:data1, data2, data3, data4, data5, data6, data7, data8, nil];

    options.chart = chart;
    options.title = title;
    options.subtitle = subtitle;
    options.plotOptions = plotoptions;
    options.series = [NSMutableArray arrayWithObjects:pie, nil];

    chartView.options = options;

    [self.view addSubview:chartView];

[ihnatmoisieiev]

Hello @skuske, thank you for the reporting. It looks like this demo doesn't up to date and there is no way to set a pattern object from API. I'll report it and let you know.

[ihnatmoisieiev]

@skuske in the next releases will be added new initializer with pattern properties to HIColor object.

[skuske]

@ihnatmoisieiev Many thanks! :o)

[ihnatmoisieiev]

@skuske pattern fills support has been added to the latest release. Can I close the issue?

[skuske]

@ihnatmoisieiev

Well, I haven't been able to test this due to https://github.com/highcharts/highcharts-ios/issues/337

[skuske]

@ihnatmoisieiev

Seems to be working, but the Highcharts default patterns don't seem to work, or how exactly do you initialize them?

#highcharts-default-pattern-1 etc.

See demo project: https://www.highcharts.com/ios/demo/accessible-pie

[ihnatmoisieiev]

@skuske

Please check the demo below:

chartView.plugins = ["pattern-fill"]

let options = HIOptions()

let chart = HIChart()
chart.type = "area"
options.chart = chart

let title = HITitle()
title.text = "Pattern fill plugin demo"
options.title = title

let xAxis = HIXAxis()
xAxis.categories = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
options.xAxis = [xAxis]

let plotOptions = HIPlotOptions()
plotOptions.area = HIArea()
let patternObject = HIPatternObject()
patternObject.pattern = HIPatternOptionsObject()
patternObject.pattern.path = "M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11"
patternObject.pattern.width = 10
patternObject.pattern.height = 10
patternObject.pattern.opacity = 0.4
plotOptions.area.fillColor = HIColor(pattern: patternObject)
options.plotOptions = plotOptions

let area1 = HIArea()
area1.data = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]
area1.color = HIColor(hexValue: "88e")
let area1PatternObject = HIPatternObject()
area1PatternObject.pattern = HIPatternOptionsObject()
area1PatternObject.pattern.color = "#11d"
area1.fillColor = HIColor(pattern: area1PatternObject)

let area2 = HIArea()
area2.data = [NSNull(), NSNull(), NSNull(), NSNull(), NSNull(), 43.1, 95.6, 148.5, 216.4, 194.1, 95.6, 54.4]
area2.color = HIColor(hexValue: "e88")
let area2PatternObject = HIPatternObject()
area2PatternObject.pattern = HIPatternOptionsObject()
area2PatternObject.pattern.color = "#d11"
area2.fillColor = HIColor(pattern: area2PatternObject)

options.series = [area1, area2]