Skip to content
This repository has been archived by the owner on Dec 2, 2020. It is now read-only.

Axis Labels

Samuel Spencer edited this page Aug 3, 2017 · 19 revisions

BEMSimpleLineGraph offers easy ways to include labels along the graph's axis.


X-Axis

To add labels along the X-Axis, simply implement the following delegate method: lineGraph:labelOnXAxisForIndex:.
It should return the text to be displayed for each UILabel on the X-Axis at a given index. The number of points on the graph and the number of strings returned should be the same.

- (NSString *)lineGraph:(BEMSimpleLineGraphView *)graph labelOnXAxisForIndex:(NSInteger)index {
    return …;
}

Gaps Between Labels

When only implementing lineGraph:labelOnXAxisForIndex:, too many labels might be displayed. Thankfully, BEMSimpleLineGraph offers different ways to control how many labels will be displayed:

  • Using a modulo operation
    Click here to learn more about modulo operations.
    This is probably the easiest way to skip some labels in order to avoid overlaps.
    In the following example, only every other label will be displayed:
- (NSString *)lineGraph:(BEMSimpleLineGraphView *)graph labelOnXAxisForIndex:(NSInteger)index {
    if ((index % 2) == 1) return [self.ArrayOfDates objectAtIndex:index];
    else return @"";
}
  • Using the method numberOfGapsBetweenLabelsOnLineGraph:
    numberOfGapsBetweenLabelsOnLineGraph: informs how much empty space is needed between each displayed label. Returning 0 will display all of the labels (just like if this method wasn't implemented). Returning the total number of labels will only display the first and last label. See the image below for clarification.
- (NSInteger)numberOfGapsBetweenLabelsOnLineGraph:(BEMSimpleLineGraphView *)graph {
    return X; // The number of hidden labels between each displayed label.
}

On the left, numberOfGapsBetweenLabelsOnLineGraph: returns 0, in the middle it returns 1 and on the right it returns the number of points in the graph.

Note
The overlapping labels on the X-Axis will automatically be removed if they overlap.

Enable/disable X-Axis labels

The property enableXAxisLabel controls if the labels on the X-Axis should be displayed or not. Its default value is YES.

@property (nonatomic) BOOL enableXAxisLabel;

X-Axis Label Color

The property colorXaxisLabel controls the color of the text of the UILabels on the X-Axis. Its default value is blackColor.

@property (strong, nonatomic) UIColor *colorXaxisLabel;

X-Axis Background Color/Alpha

The properties colorBackgroundXaxis & alphaBackgroundXaxis control the color and alpha of the X-Axis background.

@property (strong, nonatomic) UIColor *colorBackgroundXaxis;

@property (strong, nonatomic) UIColor *alphaBackgroundXaxis;

Y-Axis

To add labels along the Y-Axis, simply set the BOOL property enableYAxisLabel to YES.

self.myGraph.enableYAxisLabel = YES

By default, three labels will be displayed: the maximum value, the minimum value and the average value.

Displaying More Labels On the Y-Axis

The optional method numberOfYAxisLabelsOnLineGraph:is here to display more labels on the Y-Axis. It places the labels evenly along the Y-Axis. If this method is not implemented, 3 labels will be displayed on the Y-Axis.

- (NSInteger)numberOfYAxisLabelsOnLineGraph:(BEMSimpleLineGraphView *)graph {
    return 3;
}

Y-Axis Label Color

The property colorYaxisLabel controls the color of the text of the UILabels on the Y-Axis. Its default value is blackColor.

@property (strong, nonatomic) UIColor *colorXaxisLabel;

Y-Axis Background Color/Alpha

The properties colorBackgroundYaxis & alphaBackgroundYaxis control the color and alpha of the Y-Axis background.

@property (strong, nonatomic) UIColor *colorBackgroundYaxis;

@property (strong, nonatomic) UIColor *alphaBackgroundYaxis;