Multiple X-Axes or Series Next to Each Other


I’m trying to accomplish the following column series chart (in the pic below on the left) which has two groups of data points with their labels on the bottom x-axis. Each group’s label needs to have a view (colored line) that spans from the start of their first bar until the ending edge of their last bar and has their text centered with the group of bars.

I’m not quite sure if multiple x-axis are the right approach towards accomplishing this, but it seems like it could be close. I’ve added a second x-axis which you can see in the screenshot (on the right) that allows the two different colored column groups and a label on the axis for each group, but I couldn’t find documentation on how to get the axis to appear next to each other instead of on top of each other.

I’d be very appreciative if anyone has any suggestions on how to accomplish the grouped labels in the same axis. I’ve also looked into adding annotations since they can be positioned relative to the data points but it seems like annotations are restricted to the plot area instead of the axis areas. I also thought of stacking two charts on top of each other but thought that it might be a little odd especially if we need to enable gesturing in the future.

Thanks in advance for any insights!


Hi eo-jcraddock,

I think the easiest way to achieve this would be to use a single x-axis and then a custom subview for your lines/labels.

To calculate the pixel position of the lines relative to the data, you can use the pixelValueForDataValue: method on the x-axis, followed by convertPoint:fromView: to convert that point into the coordinates of the chart’s area.

You may also want to may use of the barColumnSpacing property on the column series, which enables you to specify the exact width of the columns in data-terms, which will make it easier to determine where the line should start and end.

I hope that helps.