Tuesday, May 14, 2013

Objective c Shinobi column charts with labels on top of each bar

This article is for iOS developers who are using the Shinobi charts for iOS using Objective-c framework and struggling to display the slice value on top of each slice in the column charts.



Assuming the below image which is displaying the y-axis value on top of each slice is your required functionality.







Then use the below delegate method to display y axis value on top of each bar slice in column charts in the below method.

-(id<SChartData>)sChart:(ShinobiChart*)chart dataPointAtIndex:(int)dataIndex 
forSeriesAtIndex:(int)seriesIndex
{
}

But for this we need to add an annotation to the chart to work. Here is the annotation code in ObjectiveC that you need to add to the chart for displaying y-axis slice values.
We can customise the text color also.



SChartAnnotation​ *a = [SChartAnnotation annotationWithText:
[NSString stringWithFormat:@"%d%%",[dp.yValue intValue]]
andFont:[UIFont systemFontOfSize:20.f]
withXAxis:chart.xAxis​ ​
andYAxis:chart.yAxis                       
atXPosition:[NSNumber numberWithInt:dataIndex]
andYPosition:dp.yValue
withTextColor:[UIColor blackColor]
withBackgroundColor:[UIColor clearColor]];​
​ ​    
[chart addAnnotation:a];   
CGRect f      = a.label.frame;
f.origin.y   -= f.size.height/2.f;
a.label.frame = f; 
Feel free to comment in case of any queries or concerns.

Hope this article is useful to Shinobi Chart users :)