How to custom the filled area of TKChartAreaSeries

[Hieu]

Hi,

I'm using the Telerik stacked area chart to implement BMI chart in my business app. The requirement is as BMI_Chart.png, and the output of tried demo is Stacked_Area_Chart.png. I have some questions:

1. Does it accomplish the requirement with the stacked area chart or any other Telerik chart ?
2. Can I just fill color between area of two chart lines ?

Please give advise. Thanks

[Adrian]

Hello Hieu,

Thank you for contacting us.

The scenario shown in the bmi_chart.png screenshot is possible using TKChart. To achieve it you should use stacked area charts. You should create two area charts with their corresponding data points and set their stackInfo properties to make them stacked. Please consider the code snippet below:

TKChartStackInfo *info = [[TKChartStackInfo alloc] initWithID:@(1) withStackMode:TKChartStackModeStack];
TKChartAreaSeries *belowArea = [[TKChartAreaSeries alloc] initWithItems:dataPoints1];
belowArea.stackInfo = info;

TKChartAreaSeries *upperArea = [[TKChartAreaSeries alloc] initWithItems:dataPoints2];
upperArea.stackInfo = info;

Then to customize the visual appearance of the area series you should adopt the TKChartDelegate protocol and implement its chart:paletteItemForSeries:atIndex: method. The following code snipped demonstrates how to customize the series to look like on your screenshot:

- (TKChartPaletteItem *)chart:(TKChart *)chart paletteItemForSeries:(TKChartSeries *)series atIndex:(NSInteger)index
{
    TKChartPaletteItem *item = [[TKChartPaletteItem alloc] init];
    item.stroke = [TKStroke strokeWithColor:[UIColor colorWithRed:160 / 255.0 green:183 / 255.0 blue:76 / 255.0 alpha:1]];
    if (index == 0) {
        item.fill = [TKSolidFill solidFillWithColor:[UIColor clearColor]];
    }
    else {
        item.fill= [TKSolidFill solidFillWithColor:[UIColor colorWithRed:160 / 255.0 green:183 / 255.0 blue:76 / 255.0 alpha:0.9]];
    }

    return item;
}

You can read more about customization in TKChart in our documentation.

As to your second question, currently it is not possible to fill the area between 2 line series. However this sounds like a good suggestion and we will consider implementing such functionality.

I hope this helps. Should you have further questions, do not hesitate to contact us.

Regards,
Adrian
Telerik

 

 

[Hieu]

Thanks for your great support team, your sample code runs very well ;). I hope new feature to fill the area between 2 line series. One small question, how to rotate label of Y-axis to vertical direction. I have tried with some values, such as 90 (PI/2), -90,... but not get the expect result.

Thanks again.

[Adrian]

Hello Hieu,

Currently it is not possible to set rotation angle for the axis labels. This is already logged in our feedback portal. Feel free to vote/comment there. To rotate the axis labels you should set the fitMode property of TKChartAxisLabelStyle. Please consider the following code snippet:

yAxis.style.labelStyle.fitMode = TKChartAxisLabelFitModeRotate;

I will be glad to assist you if you have further questions.

Regards,
Adrian
Telerik