UI for iOS has been discontinued. Please refer to this page for more information.

Try now

Table of Contents

Point Labels: Customization

TKChart lets you customize point labels using TKChartPointLabelStyle's properties. However, sometimes you may need to draw specific shapes for the labels. In such cases you should sublcass TKChartPointLabel to create your own label and implement TKChartDelegate to use it.

Customization using TKChartPointLabelStyle properies

Here is an example how to customize point labels changing TKChartPointLabelStyle settings.

TKChartLineSeries *lineSeries = [[TKChartLineSeries alloc] initWithItems:dataPoints];
lineSeries.selection = TKChartSeriesSelectionDataPoint;
lineSeries.style.pointShape = [TKPredefinedShape shapeWithType:TKShapeTypeCircle andSize:CGSizeMake(8, 8)];
lineSeries.style.pointLabelStyle.textHidden = NO;
lineSeries.style.pointLabelStyle.layoutMode = TKChartPointLabelLayoutModeManual;
lineSeries.style.pointLabelStyle.labelOffset = UIOffsetMake(0, -24);
lineSeries.style.pointLabelStyle.insets = UIEdgeInsetsMake(-1, -5, -1, -5);
lineSeries.style.pointLabelStyle.font = [UIFont systemFontOfSize:10];
lineSeries.style.pointLabelStyle.textAlignment = NSTextAlignmentCenter;
lineSeries.style.pointLabelStyle.textColor = [UIColor whiteColor];
lineSeries.style.pointLabelStyle.fill = [TKSolidFill solidFillWithColor:[UIColor colorWithRed:108/255.0 green:181/255.0 blue:250/255.0 alpha:1.0]];
lineSeries.style.pointLabelStyle.clipMode = TKChartPointLabelClipModeHidden;

let lineSeries = TKChartLineSeries(items: dataPoints)
lineSeries.selection = TKChartSeriesSelection.dataPoint
lineSeries.style.pointShape = TKPredefinedShape(type: TKShapeType.circle, andSize: CGSize(width: 8, height: 8))
lineSeries.style.pointLabelStyle.textHidden = false
lineSeries.style.pointLabelStyle.layoutMode = TKChartPointLabelLayoutMode.manual
lineSeries.style.pointLabelStyle.labelOffset = UIOffsetMake(0, -24)
lineSeries.style.pointLabelStyle.insets = UIEdgeInsetsMake(-1, -5, -1, -5)
lineSeries.style.pointLabelStyle.font = UIFont.systemFont(ofSize: 10)
lineSeries.style.pointLabelStyle.textAlignment = NSTextAlignment.center
lineSeries.style.pointLabelStyle.textColor = UIColor.white
lineSeries.style.pointLabelStyle.fill = TKSolidFill(color: UIColor(red: 108/255.0, green: 181/255.0, blue: 250/255.0 , alpha: 1.0))
lineSeries.style.pointLabelStyle.clipMode = TKChartPointLabelClipMode.hidden

TKChartLineSeries lineSeries = new TKChartLineSeries (dataPoints.ToArray ());
lineSeries.Selection = TKChartSeriesSelection.DataPoint;
lineSeries.Style.PointShape = new TKPredefinedShape (TKShapeType.Circle, new SizeF (8, 8));
lineSeries.Style.PointLabelStyle.TextHidden = false;
lineSeries.Style.PointLabelStyle.LabelOffset = new UIOffset (0, -24);
lineSeries.Style.PointLabelStyle.Insets = new UIEdgeInsets (-1, -5, -1, -5);
lineSeries.Style.PointLabelStyle.LayoutMode = TKChartPointLabelLayoutMode.Manual;
lineSeries.Style.PointLabelStyle.Font = UIFont.SystemFontOfSize (10);
lineSeries.Style.PointLabelStyle.TextAlignment = UITextAlignment.Center;
lineSeries.Style.PointLabelStyle.TextColor = UIColor.White;
lineSeries.Style.PointLabelStyle.Fill = new TKSolidFill (new UIColor ((float)(108 / 255.0), (float)(181 / 255.0), (float)(250 / 255.0), (float)1.0));
lineSeries.Style.PointLabelStyle.ClipMode = TKChartPointLabelClipMode.Hidden;

Custom point labels

Subclassing TKChartPointLabel lets you perform custom drawing and calculate the size of the point label. Once you create your own label you should implement TKChartDelegate to use it.

- (TKChartPointLabel *)chart:(TKChart *)chart labelForDataPoint:(id<TKChartData>)dataPoint property:(NSString *)propertyName inSeries:(TKChartSeries *)series atIndex:(NSUInteger)dataIndex
{
    if (series.index == _selectedSeriesIndex && dataIndex == _selectedDataPointIndex) {
        return [[MyPointLabel alloc] initWithPoint:dataPoint series:series text:[NSString stringWithFormat:@"%@", dataPoint.dataYValue]];
    }

    return [[TKChartPointLabel alloc] initWithPoint:dataPoint series:series text:[NSString stringWithFormat:@"%@", dataPoint.dataYValue]];
}

func chart(_ chart: TKChart, paletteItemForPoint index: UInt, in series: TKChartSeries) -> TKChartPaletteItem? {
    if series.index == self.selectedSeriesIndex && index == self.selectedDataPointIndex {
        return TKChartPaletteItem(stroke: TKStroke(color: UIColor.black, width: 2.0), andFill: TKSolidFill(color: UIColor.white))
    }

    if series.index == 0 {
        return TKChartPaletteItem(fill: TKSolidFill(color: UIColor(red: 108/255.0, green: 181/255.0, blue: 250/255.0, alpha: 1.0)))
    }

    return TKChartPaletteItem(fill: TKSolidFill(color: UIColor(red: 241/255.0, green: 140/255.0, blue: 133/255.0, alpha: 1.0)))
}

public override TKChartPointLabel LabelForDataPoint (TKChart chart, TKChartData dataPoint, string propertyName, TKChartSeries series, nuint dataIndex)
{
    TKChartDataPoint point = (TKChartDataPoint)dataPoint;
    if (series.Index == (nuint)this.selectedSeriesIndex && dataIndex == (nuint)this.selectedDataPointIndex) {
        return new MyPointLabel (point, series, String.Format ("{0}", point.DataYValue));
    }


    return new TKChartPointLabel (point, series, String.Format ("{0}", point.DataYValue));
}