Problems getting the correct sizing and styling in a dynamic chart (1)


#1

I’m having problems with the styling of one of my charts on the iPhone.  The chart and its details are loading based on information coming from the server.

Right now, I am having 3 different basic problems:

  •  If the chart title is too long it is cut off at the edge of the frame (instead of resizing or wrapping.)
  • The last label on the x-axis also extends past the edge of the frame.
  • This graph is drawn with 2 points, but it is hard to decipher what those 2 points are because of the way the line was drawn and the x-axis spaces itself. (The points for the below graph are 310,000 on 12/4/2011 (2011-12-04) and 110,000 on 9/11/2012 (2012-09-11).  The first date is the beginning on the chart, but the second date is hard to even approximate.

Is there a way to automaticaly size and format the labels to ensure they fit in the chart’s frame?  Is there a better way to lay out the x-axis so that charts similar to this one are more easily read?


#2

Hi Canderson,

I’ll answer your questions in  a similar format to how you asked them :laughing::

  1. We made a decision to keep the chart title simple. I’ll raise it as a feature request in our backlog, but for now your options are either to change the font size of your title, or to hide your title and implement your own chart title at the top of your view controller.

  2. Assuming that your charts frame ends at the end of the screen, setting your X-axis’ tickLabelClippingModeHigh to SChartTickLabelClippingModeNeitherPersist should cause the tick label to disappear. There isn’t really anything else you can do about that, other than following one, or a combination of the steps I mention in 3)  :smile:.

  3.  If I understand this question correctly, you have the following issues:

  • The value 100,000 is missing from the Y-axis.
    This looks like a case of tick label clipping on the lower end of the Y-axis. Trying playing with the values assigned to chart.yAxis.tickLabelClippingModeLow, or changing your range so that the tick comes into view.

  • The highest X-axis label is cut off.
    Here there are many combinations of things you could do to improve this, you could:

  • Reduce the width of your chart so it isn’t flush with the right side of your screen.

  • Reduce the size of your tick labels.

  • Change your tick label text, i.e 9 Apr.

  • Add some padding to the top of your X-axis range, so your data point isn’t flush with the edge of your chart’s range. (See rangePaddingHigh on SChartAxis).

  • Set the range manually on your X-axis to give you some space.

I hope the above advice helps!
Jan