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

Try now

Table of Contents

Chart Series: Scatter

TKChartScatterSeries plots its data along two axes. Scatter series identify the position of each point using two dimentional values - XValue and YValue for the horizontal and vertical axes respectively, just like in the typical Cartesian coordinate system. Here is how to create a TKChartScatterSeries and populate them manually:

NSMutableArray *points = [[NSMutableArray alloc] init];
for (int i = 0; i < 20; i++) {
    [points addObject:[[TKChartDataPoint alloc] initWithX:@(arc4random() % 1450) Y:@(arc4random()%150)]];
}
TKChartScatterSeries *series = [[TKChartScatterSeries alloc] initWithItems:points];

var points  = [TKChartDataPoint]()
for _ in 0..<20 {
    let randomX = Int(arc4random()%1450)
    let randomY = Int(arc4random()%150)
    points.append(TKChartDataPoint(x:randomX, y:randomY))
}
let series = TKChartScatterSeries(items:points)

List<TKChartDataPoint> list = new List<TKChartDataPoint> ();
for (int j = 0; j < 20; j++) {

    list.Add(new TKChartDataPoint (new NSNumber (r.Next() % 1450), new NSNumber (r.Next () % 150)));
}

TKChartScatterSeries series = new TKChartScatterSeries (list.ToArray());

Customizing the visual appearance

In addition, you can change a point background color by using the following lines of code:

TKChartScatterSeries *series = [[TKChartScatterSeries alloc] initWithItems:scatterPoints];
TKChartPaletteItem *palleteItem = [[TKChartPaletteItem alloc] init];
palleteItem.fill = [TKSolidFill solidFillWithColor:[UIColor redColor]];
series.style.palette = [[TKChartPalette alloc] init];
[series.style.palette addPaletteItem:palleteItem];
[chart addSeries:series];

let series = TKChartScatterSeries(items: scatterPoints)
let paletteItem = TKChartPaletteItem()
paletteItem.fill = TKSolidFill(color: UIColor.red)
series.style.palette = TKChartPalette()
series.style.palette!.addItem(paletteItem)
chart.addSeries(series)

var series = new TKChartScatterSeries (scatterPoints.ToArray());
var paletteItem = new TKChartPaletteItem();
paletteItem.Fill = new TKSolidFill (UIColor.Red);
series.Style.Palette = new TKChartPalette();
series.Style.Palette.AddPaletteItem (paletteItem);
chart.AddSeries (series);

Configure input and selection of line series

Here is how to configure the distance between finger touch and line to perform selection:

TKChartScatterSeries *series = [[TKChartScatterSeries alloc] initWithItems:scatterPoints];
series.selection = TKChartSeriesSelectionDataPoint;
series.marginForHitDetection = 30.f;
[chart addSeries:series];

let series = TKChartScatterSeries(items: scatterPoints)
series.selection = TKChartSeriesSelection.dataPoint
series.marginForHitDetection = 30.0
chart.addSeries(series)

var series = new TKChartScatterSeries (scatterPoints.ToArray());
series.Selection = TKChartSeriesSelection.DataPoint;
series.MarginForHitDetection = 30.0f;
chart.AddSeries (series);