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


#1

Hi,

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.


#2

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.


#3

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,
Joseph


#4

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.


#5

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,
Joseph


#6

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!
Rob