Bubble chart individual bubble colors

2 posts, 0 answers
  1. Robert
    Robert avatar
    5 posts
    Member since:
    Aug 2015

    Posted 31 Jan Link to this post

    I'm trying to create the bubble chart illustrated in the attached .png file using Telerik UI for iOS.  The features I need that I can't figure out how to create are:

     -- Changing the color of each bubble in the series

    -- Adding an annotation next to each bubble.

     I thought the right way to get closer to this design was to implement paletteItemForPoint in my TKChartDelegate

    Toward this, I added these lines to my chart series creation:

            bubbleSeries.selectionMode = TKChartSeriesSelectionMode.DataPoint
            bubbleSeries.style.pointShape = TKPredefinedShape(type: TKShapeType.Circle, andSize: CGSizeMake(8, 8))

    And set my class as the chart delegate 

    And then implemented paletteItemForPoint

     However paletteItemForPoint is never called for my bubble chart.  I did the same steps with a line chart and the paletteItemForPoint routine is called as expected.

     Am I going about this the wrong way, or  is it just impossible to customize a bubble chart in these ways?



  2. Adrian
    Adrian avatar
    159 posts

    Posted 03 Feb Link to this post

    Hello, Rob,

    Thank you for contacting us.

    It is possible to customize the palette items of the bubbles in bubble chart by adopting TKChartDelegate and implementing its chart:paletteItemForSeries:atIndex where the index parameter is the index of the point in the series. Consider the code below:
    - (TKChartPaletteItem *)chart:(TKChart *)chart paletteItemForSeries:(TKChartSeries *)series atIndex:(NSInteger)index
        TKChartPaletteItem *item = [TKChartPaletteItem paletteItemWithFill:[TKSolidFill solidFillWithColor:[self getRandomColor]]];
        return item;

    Do not forget to set the shape of the series:
    - (void)viewDidLoad
        [super viewDidLoad];
        series.style.pointShape = [TKPredefinedShape shapeWithType:TKShapeTypeCircle andSize:CGSizeMake(10, 10)];

    I hope this helps. Do not hesitate to contact us in case you need further assistance.

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. DevCraft R3 2016 release webinar banner
Back to Top