Line Chart With Markers

[Hk]

Hello,

Here in Line Chart i can see only Straight line in my output(refer "Straight_line_Only.png"). I want to show markers(solid/only with borders) on line Chart(refer desired output as "target_lineChart.png").Kindly provide Document/Demo/Code for same.

I am using Native Script with Angular2.

Thank you.

[Nikolay Tsonev]

Hello,

To be able to achieve the similar UI as it is shown in the image for a final result, you could use the combination of LineSeries and BundleSeries. The LineSeries will draw the line and Bundle one will show the markers for the values set up for valueProperty.

For further help, you could review the attached sample code in the ticket.

HTML

<RadCartesianChart tkExampleTitle tkToggleNavButton>
    <CategoricalAxis tkCartesianHorizontalAxis verticalLocation="Bottom" labelFitMode="Rotate" labelRotationAngle="1.2"></CategoricalAxis>
    <LinearAxis tkCartesianVerticalAxis></LinearAxis>
    <LineSeries tkCartesianSeries [items]="highDataModel" categoryProperty="Year" valueProperty="Amount"></LineSeries>
    <BubbleSeries tkCartesianSeries [items]="highDataModel" bubbleScale="5" categoryProperty="Year" valueProperty="Amount" bubbleSizeProperty="Impact"></BubbleSeries>
</RadCartesianChart>

TypeScript

import { Component, OnInit } from '@angular/core';
import { ObservableArray } from "tns-core-modules/data/observable-array";

@Component({
    moduleId: module.id,
    selector: 'tk-chart-series-bubble',
    templateUrl: 'chart-series-bubble.component.html'
})
export class ChartSeriesBubbleComponent implements OnInit {
    private _highDataModel: ObservableArray<Country>;

    constructor() { }

    get highDataModel(): ObservableArray<Country> {
        return this._highDataModel;
    }



    ngOnInit() {
        var array =[
            { Year: 2000, Amount: 15, Impact: 1, Country: "", SecondVal: 0, ThirdVal: 0 },
            { Year: 1456, Amount: 13, Impact: 7, Country: "", SecondVal: 0, ThirdVal: 0 },
            { Year: 1866, Amount: 25, Impact: 10, Country: "", SecondVal: 0, ThirdVal: 0 },
            { Year: 1900, Amount: 5, Impact: 3, Country: "", SecondVal: 0, ThirdVal: 0 },
            { Year: 1700, Amount: 17, Impact: 4, Country: "", SecondVal: 0, ThirdVal: 0 },
            { Year: 1600, Amount: 20, Impact: 1, Country: "", SecondVal: 0, ThirdVal: 0 },
        ];
        this._highDataModel = new ObservableArray(array);
    }
}

class Country {
    constructor(public Country?: string, public Amount?: number, public SecondVal?: number, public ThirdVal?: number, public Impact?: number, public Year?: number) {
    }
}

Regards,
nikolay.tsonev
Progress Telerik