Help styling a chart


#1

Hi there, I’m hoping for some help styling an sChart. There are a lot of small details to match and I’m not entirely sure what’s possible and what’s not. I’ve made some progress, but I could use some suggestion to know where I should be focusing my efforts. And if anything is really difficult, or impossible, I’d like to know that too. This is a prototype, so I don’t need to match the intended design perfectly, but the closer the better.

Some of what I’m trying to achieve:

  • An annotation view that is behind the graph line, but extends in front of the axis (currently, axis blocks the annotation)
  • Date format on the axis is less abbreviated
  • x axis values only appear where there is a data point
  • change background color of the axis

Here’s my reference design (goal), and what I’ve done so far: link

Appreciate any guidance!


#2

I figured out how to change the background color of the axis.

self.chart.theme.chartStyle.backgroundColor = [UIColor whiteColor];
self.chart.theme.chartStyle.backgroundColorGradient = [UIColor grayColor];
[self.chart applyTheme];

I had the properties right, but I was missing the applyTheme at the end.

Still curious about the remaining issues.


#3

I think you are looking for an SChartScatterSeries for the “x axis values only appear where there is a data point”


#4

Hi JustinKent,

It seems to me that all of the items in your list can be accomplished using ShinobiCharts. Here is how:

  1. You should be able to have the annotation view behind the graph line, but extends in front of the axis by setting the clipToBounds property on the glView of the canvas to NO like so:

    chart.canvas.glView.clipsToBounds = NO;

  2. Using a less abbreviated version of the date on the xaxis can be done by setting the date format on the axis using this code:

    [[[chart xAxis].labelFormatter dateFormatter] setDateFormat:@“MMM dd, yyyy”];

3) The easiest way to only show x axis value where there is a data point would be to format the dates as previously shown and then set them as string in a SChartCategoryAxis which will only draw tickmarks at your specified values where as an SChartDateTimeAxis will create a set of tickmarks at interpolated values.

  1. I am glad to hear you have managed to change the background color of the axis :slight_smile:

Let me know you get on.

Kind regards

Daniel Allsop