How to custom the filled area of TKChartAreaSeries

4 posts, 0 answers
  1. Hieu
    Hieu avatar
    1 posts
    Member since:
    Mar 2015

    Posted 04 Mar 2015 Link to this post

    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
  2. Adrian
    Admin
    Adrian avatar
    167 posts

    Posted 06 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
  4. Hieu
    Hieu avatar
    1 posts
    Member since:
    Jan 2015

    Posted 08 Mar 2015 in reply to Adrian Link to this post

    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.
  5. Adrian
    Admin
    Adrian avatar
    167 posts

    Posted 11 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
DevCraft banner