Bar series: determine bar positions

3 posts, 1 answers
  1. Thomas
    Thomas avatar
    2 posts
    Member since:
    Oct 2015

    Posted 19 Jul Link to this post


    I am using a bar series, my aim is to reach a result similar to the "Target.png" file attached. I have a few issues:

    1. I cannot determine the width that will be taken by the y axis. Is there any way to force it to a maximum width ?

    2. For the data point label, I cannot find a way to have two labels on top of each other with different fonts and colors.

    3. I have to highlight the selection as shown in the attached file. I see no way to customise this highlight. I thought about making it completely custom by adding a custom view below my graph, but I cannot see how I should determine the exact position of each bar. I have set a fixed bar height to 34, but depending on the number of categories and of course the available height, the free space on the top and bottom of the graph will change. Is there any way to force the graph to take the whole height ? Or do someone know the actual math to determine the spacing between each bar, and the unused height on top and bottom ?


    Thanks in advance.


  2. Answer
    Sophi avatar
    97 posts

    Posted 22 Jul Link to this post

    Hi, Thomas

    I am not sure that I completely understand what you mean by "cannot determine the width that will be taken by the Y axis". Could you, please provide me a bit more information or a sample.

    In order to have labels with different colors and fonts you should conform to the TKChartDelegate protocol and implement the attributedTextForAxis:value:atIndex: method. This way you can provide different style for each label. Consider the following implementation.
    -(NSAttributedString *)chart:(TKChart *)chart attributedTextForAxis:(TKChartAxis *)axis value:(id)value atIndex:(NSUInteger)index{
         NSAttributedString *str;
        NSArray *color = @[[UIColor redColor], [UIColor greenColor], [UIColor orangeColor]];
        if (axis == chart.yAxis){
            NSString* s = [NSString stringWithFormat:@"%@",value];
            str = [[NSAttributedString alloc] initWithString:s attributes:@{NSForegroundColorAttributeName:color[index%3]}];
        return str;

    The width of each bar is calculated based on the height of the chart and the number of given data points.
    The formula for bar width including the space before and after the bar is 
    tickWidth = chartHeight/range
    Mind that tickWidth is width for the actual bar + twice gap space, before bar and after it.

    The gap between ticks is calculated by this formula (where gap length is nuber between 0 and 1, it is a percent)
    gap = tickWidth * gapLength

    Telerik by Progress
    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
  4. Thomas
    Thomas avatar
    2 posts
    Member since:
    Oct 2015

    Posted 17 Aug in reply to Sophi Link to this post

    Hello Sophi,

    Thanks for your detailed answer.

    For the Y axis issue, I actually found a workaround so no need to go further.

    Best regards,


Back to Top