Cutom TKShape for Point Shapes in Line Charts

2 posts, 0 answers
  1. Amit
    Amit avatar
    1 posts
    Member since:
    Jan 2015

    Posted 24 Feb 2015 Link to this post


    The examples show the way to change the point shapes is by adding custom TKPredefinedShape like this: = [TKPredefinedShape shapeWithType:TKShapeTypeCircle andSize:CGSizeMake(8, 8)];

    But is it possible to change it to any other shape of our liking by inheriting from TKShape?
  2. Yoanna
    Yoanna avatar
    44 posts

    Posted 26 Feb 2015 Link to this post

    Hello, Amit,

    Thank you for contacting us,

    In order to draw a custom shape for the point shapes in your chart you need to inherit TKShape class and override its drawInContext:withCenter:drawings:  method. In this method you could create any custom shape by using TKFill and/or any class that adopts the TKDrawing protocol and draw it in the current context.

    The following code snippet shows an example how to do this:
    Copy Code
    @implementation CustomShape
    -(void)drawInContext:(CGContextRef)context withCenter:(CGPoint)center drawings:(NSArray *)drawings
        CGMutablePathRef path = CGPathCreateMutable();
        CGPathMoveToPoint(path, nil, center.x, center.y);
        CGPathAddLineToPoint(path, nil, center.x + 20, center.y + 20);
        CGPathAddLineToPoint(path, nil, center.x + 0, center.y + 20);
        CGPathAddLineToPoint(path, nil, center.x, center.y);
        TKSolidFill* fill = [[TKSolidFill alloc]initWithColor:[UIColor redColor]];
        [fill drawInContext:context withPath:path];


    once you have the custom shape you assign an instance of it to the pointShape property of the series style:
    Copy Code
    - (void)viewDidLoad {
        [super viewDidLoad];
    //create chart code...
    TKChartLineSeries* lineSeries = [[TKChartLineSeries alloc] initWithItems:data];
    CustomShape* shape  = [[CustomShape alloc] init]; = shape;

    I hope this helps. If you have any further questions do not hesitate to contact us.

    Author nickname

    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 R3 2016 release webinar banner
Back to Top