Customise column in SChartColumnSeries


#1

Hi,

I would like to customise column in SChartColumnSeries, so that I would override UIView class of column, so that column would look like I want.

What I want to achieve is something like bars in iOS Health app

If I just set
barSeries.style().cornerRatio = 1.0
this rounded bar only on the top, and it doesn’t rounded enough. I would also like to set width of the bar manually.

Is there a way to do this?


#2

Hi Marko,

Our corner ratio calculation depends on the column having sufficient height compared to its width in order to fully round the columns. I’m guessing this might be what’s causing your problem, however would you mind attaching an image to indicate what you mean?

Currently we only support rounding the top of the column, however you can give the impression of a single fully rounded column by adding a second series that extends from the baseline of your existing column.

The following sample data source should get you on your way - the important bit is to set each column to a unique groupIndex which prevents the columns from being positioned alongside each other.

func numberOfSeries(in chart: ShinobiChart) -> Int {
        return 2
    }

func sChart(_ chart: ShinobiChart, seriesAt index: Int) -> SChartSeries {
        let series = SChartColumnSeries()
        
        series.style().cornerRatio = 1
        
        series.style().areaColor = .blue
        series.style().areaColorGradient = .blue
        series.style().areaColorBelowBaseline = .blue
        series.style().areaColorGradientBelowBaseline = .blue
        
        series.groupIndex = index // Important these are different - prevents series from being positioned alongside each other
        
        return series
    }
func sChart(_ chart: ShinobiChart, dataPointAt dataIndex: Int, forSeriesAt seriesIndex: Int) -> SChartData {
        let yVal = seriesIndex == 0 ? 10 : -1
        return SChartDataPoint(xValue: dataIndex, yValue: yVal)
    }
func sChart(_ chart: ShinobiChart, numberOfDataPointsForSeriesAt seriesIndex: Int) -> Int {
        return 10
    }

This results in something that looks like

I hope that helps.

Sam


#3

Hi, thank you for your answer.

At first, your solution bring problem, that graph didn’t start at 0 but -1, but I solved it with setting second series value to 0, and setting baseline to 1.

Regarding rounded corners, I still don’t understand how they are drowned, because those on your pictures are too rounded, mine are not enough.

Can you explained further about sufficient height, or how the corner radius is calculated?


#4

Hi Marko,

Rounded corners can be set to a value between 0 and 1 which represents a ratio of half the bar or column width.

For example, if a column is 100 pixels wide the corner ratio when set to 1 sets the rounded corner radius to 50 pixels. When set the corner ratio is set to 0.5 the corner radius is 25 pixels.

If setting different corner ratio values between 0 & 1 doesn’t provide you with the rounded corners you desire, could you provide a larger screenshot of the rounded corners you are currently seeing & the rounded corners you are after?

Kind regards,
Andrew Polkinghorn.


#5

Hi Andrew,

My referral was to the statement of Sam : “… ratio calculation depends on the column having sufficient height compared to its width…”

In your post and in documentation, all I can see is that rounded corner is dependent on width, not height.

But results, in fact seams that are somehow dependent on height.

I am posting my screenshot, that you can see what I am talking about. In the image, you can see that rounded corners are not fully rounded, but are a little bit flat.


#6

Hi Marko,

This flatness comes from the aspect ratio of your chart.

The current implementation of rounded corners doesn’t take into account ratio of your chart’s frame.

For example, if you give your chart the height and width of 500 & had a cornerRatio value of 1, your columns will look perfectly rounded.

If you change the height of that chart to 250, keeping the width at 500, this is where you will start to see the flattened rounded corners.

I hope this explanation helps clear things up.

I have forwarded your interest on this topic to our developers who will investigate this further.

Let me know if you have any questions.

Kind regards,
Andrew Polkinghorn.