Line Chart With Markers

2 posts, 1 answers
  1. Hk
    Hk avatar
    10 posts
    Member since:
    Jul 2017

    Posted 18 Jul Link to this post

    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.

  2. Answer
    nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    285 posts

    Posted 18 Jul Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top