[iOS] X-axis that can cover the background and dashed style annotation line?



Referring to below the ideal chart and the following one in progress, I have two questions:

Idea Image In Progress

  1. How could we make the whole X-axis to cover the background content? Current we’re able to offset the X-axis by:

    dateXAxis.secondaryAxisOffset = -60

But couldn’t make it covers the annotation and grid lines and have the border lines. Our purpose here is to totally separate the price and volume series. I know we could probably do it by using two charts and make them in sync, but could there be simpler way of doing this? 

  1. How could we make a dashed style annotation line for the reference price?

Thanks for your help in advance.


Hi Jotshin,

Thanks for getting in touch!

  1. I’m unsure exactly what you are asking here.
    Do you mean make your data spread across your entire X-Axis?
    Any clarification would be much appreciated.

  2. An annotation is just a UIView so you can add subviews to it or create a DashedLineAnnotation that subclasses SChartAnnotation that contains drawing code to draw a dashed line.

Let me know if you have any question.

Kind regards,
Andrew Polkinghorn.


Hi Andrew,

Thanks for getting back.

Regarding the first one, what I mean is if my X-axis could block any background content like the vertical horizontal annotation line and even have the border line?
It’d be perfect if I could make the chart looks like there are two separate charts, up and down like below image:

Best regards,


Hi Jotshin,

This isn’t a built in feature supported by our axes, however it is possible using a horizontal band annotation.

If you have set your X-axis’ “axisPositionValue” to the data value of 60, you can create a horitzontal band annotation, using the “horizontalBand” static method on SChartAnnotation, with the position value of around 50 and a max Y value of 60.

This should provide you with the feature you have described.

Let me know if you have any questions.

Kind regards,
Andrew Polkinghorn.


Thanks very much Andrew!

The horizontal band annotation does work. However, I have another two questions to consult you, referring the below image:

  1. Is there any way to block the bottom part of the vertical line in the middle? Currently there’s a horizontal band annotation in the middle, but I would need a way to block the whole bottom part of it.

  1. I know I should use the gridline setting to achieve what I want, but currently I encountered a problem with majorTickValuesFor delegate. I have three Y-axes and we use SChartCategoryAxis for X-axis. My delegate looks like below:

func sChart(_ chart: ShinobiChart, majorTickValuesFor axis: SChartAxis) -> [Any]? {

    // volume Y axis
    if (axis == chart.allYAxes().last) {
        return [volumeMax, 0]
        // price Y axis
    } else if (axis == chart.allYAxes().first) {
        if isLineChartType {

            let (max, min) = calculatePriceMaxMin(with: priceDataPointArray)
            return [max, refOpenPx, min]
        // Price Limit Y Axis
    } else if axis == chart.allYAxes()[1] {
        if isLineChartType {

            let (max, min) = calculatePriceLimitMaxMin(with: priceLimitDataPointArray)
            return [max, 0, min]
    // X Axis
    else if axis == chart.xAxis {
        if isLineChartType {
            return [chart.xAxis!.range.minimum.intValue, midDayTimeIndex, chart.xAxis!.range.maximum.intValue]
        } else {
            return [chart.xAxis!.range.minimum.intValue, chart.xAxis!.range.maximum.intValue]
    } else {
        return nil

But the X-axis setting doesn’t work (I could also tell it by how many times alter tickMark delegate called for X-axis…there should be three only), and therefore when trying to style the gridlines they will be all over the plotarea instead of three (the [chart.xAxis!.range.minimum.intValue, midDayTimeIndex, chart.xAxis!.range.maximum.intValue]) above. Currently I use alter tickMark delegate with conditions to filter the labels I don’t want. Helps!

Best regards,


Hi Jotshin,

  1. I’m afraid there’s no way to really block out the vertical line - you’d have to either get rid of the gridline and recreate them manually using annotations or have two synchronised charts.

  2. Category axes don’t support majorTickValuesForAxis, I’m afraid - there may be a console warning logged about this. alterTickMark is the best solution for categories.

Hope this helps explain things!