RadChart Scatter Series

Scatter series are used in the context of a RadCartesianChart and two LinearAxis instances. Besides the setup requirements that come from CartesianSeries, ScatterSeries require an additional xProperty and yProperty parameters instead of valueProperty and categoryProperty.

Customization

Scatter series could be customized as a standard CartesianSeries as it is described in series styles article

Example

The following definition represents the data context that will be used to populate the Scatter series with data:

get scatterSource() {
    return [
        { Age: 20, Salary: 10000, Spendings: 4500, Savings: 5500, Impact: 1 },
        { Age: 25, Salary: 12300, Spendings: 6500, Savings: 5200 , Impact: 7},
        { Age: 30, Salary: 14000, Spendings: 8500, Savings: 5500 , Impact: 10},
        { Age: 35, Salary: 18000, Spendings: 9500, Savings: 7500 , Impact: 6},
        { Age: 40, Salary: 19520, Spendings: 15540, Savings: 3800 , Impact: 4},
        { Age: 45, Salary: 20000, Spendings: 15500, Savings: 4500 , Impact: 2},
        { Age: 50, Salary: 24200, Spendings: 20500, Savings: 3700 , Impact: 11},
        { Age: 55, Salary: 24000, Spendings: 22500, Savings: 1500 , Impact: 8},
        { Age: 60, Salary: 22000, Spendings: 22500, Savings: 500 , Impact: 1},
        { Age: 65, Salary: 20000, Spendings: 20500, Savings: 10, Impact: 9 }
    ];
}

We use an instance of this model to assign it as the bindingContext of the page we have put our Scatter series on:

import { ScatterDataModel } from "../../data-models/scatter-data-model";

export function onPageLoaded(args) {
    const page = args.object;
    page.bindingContext = new ScatterDataModel();
}

And finally, in the XML definition of the page we put a RadCartesianChart, add a ScatterSeries instance to it and bind the series to the source of data:

<chart:RadCartesianChart>
    <chart:RadCartesianChart.horizontalAxis>
        <chart:LinearAxis/>
    </chart:RadCartesianChart.horizontalAxis>
    <chart:RadCartesianChart.verticalAxis>
        <chart:LinearAxis/>
    </chart:RadCartesianChart.verticalAxis>
    <chart:RadCartesianChart.series>
        <chart:ScatterSeries  items="{{ scatterSource }}" xProperty="Age" yProperty="Salary"/>             
        <chart:ScatterSeries  items="{{ scatterSource }}" xProperty="Age" yProperty="Spendings"/>             
        <chart:ScatterSeries  items="{{ scatterSource }}" xProperty="Age" yProperty="Savings"/>             
    </chart:RadCartesianChart.series>
</chart:RadCartesianChart>

Cartesian chart: Scatter series

References

Want to see this scenario in action? Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

Series Examples

NativeScript Core

RadChart Scatter Series

Customization

Example

References