LineSeries colors incorrect for angular2

[License]

Sorry to reply to you after a  long time.
I have tried to do what you said above.But the result seems not so good.Please look at the image in the attached file.The color in the graph should be same in the eye icon ,but it isn't.The code is :
//annual-report.component.html
<StackLayout orientation="vertical">
<StackLayout>
<StackLayout class="hr-light m-b-5 m-t-15"></StackLayout>
<GridLayout columns="*, *, *" rows="auto">
<DropDown row='0' col='1' #year class=" h3 vr-center text-center btn-small btn-secondary" [items]="periodCategory" [selectedIndex]="yearSelectedIndex"
(selectedIndexChange)="onChange(year.selectedIndex)">
</DropDown>
</GridLayout>
<StackLayout class="hr-light m-t-5 m-b-15"></StackLayout>
</StackLayout>
<GridLayout height="70%" columns="*,*,*,*" rows="auto,*">
<StackLayout class="stackLayout" orientation="vertical" row="0" col="0">
<Label class="fa icon icon-income text-center" text="{{ incomeIcon | fonticon}}" (tap)="changeIncomeStatus()"></Label>
<Label class="label h4 text-center" text="收入"></Label>
</StackLayout>
<StackLayout class="stackLayout" orientation="vertical" row="0" col="1">
<Label class="fa icon icon-expense text-center" text="{{ expenseIcon | fonticon}}" (tap)="changeExpenseStatus()"></Label>
<Label class="label h4 text-center" text="支出"></Label>
</StackLayout>
<StackLayout class="stackLayout" orientation="vertical" row="0" col="2">
<Label class="fa icon icon-balance text-center" text="{{ balanceIcon | fonticon}}" (tap)="changeBalanceStatus()"></Label>
<Label class="label h4 text-center" text="月收支差"></Label>
</StackLayout>
<StackLayout class="stackLayout" orientation="vertical" row="0" col="3">
<Label class="fa icon icon-totalbalance text-center" text="{{ totalbalanceIcon | fonticon}}" (tap)="changeTotalBalanceStatus()"></Label>
<Label class="label h4 text-center" text="总收支差"></Label>
</StackLayout>
<GridLayout class="m-t-10" row="1" col="0" colSpan="4" width="300">
<RadCartesianChart exampleTitle toggleNavButton>
<CategoricalAxis  tkCartesianHorizontalAxis   labelSize="14" lineThickness="3" lineColor="Grey"></CategoricalAxis>
<LinearAxis  tkCartesianVerticalAxis  ></LinearAxis>
<LineSeries tkCartesianSeries seriesName="tagName" [items]="categoricalSource" categoryProperty="month"
valueProperty="income"></LineSeries>
<Trackball  tkCartesianTrackball snapMode="AllClosestPoints" showIntersectionPoints="true"></Trackball>
<LineSeries tkCartesianSeries seriesName="stagName" [items]="categoricalSource" categoryProperty="month" valueProperty="expense"></LineSeries>
<Trackball tkCartesianTrackball snapMode="AllClosestPoints" showIntersectionPoints="true"></Trackball>
<LineSeries tkCartesianSeries seriesName="tagName" [items]="categoricalSource" categoryProperty="month" valueProperty="balance"></LineSeries>
<Trackball tkCartesianTrackball snapMode="AllClosestPoints" showIntersectionPoints="true"></Trackball>
<LineSeries tkCartesianSeries seriesName="tagName" [items]="categoricalSource" categoryProperty="month" valueProperty="totalBalance"></LineSeries>
<Trackball tkCartesianTrackball snapMode="AllClosestPoints" showIntersectionPoints="true"></Trackball>
<Palette tkCartesianPalette seriesName="tagName">
<PaletteEntry tkCartesianPaletteEntry strokeWidth="1" strokeColor="#92E7C4"></PaletteEntry>
<PaletteEntry tkCartesianPaletteEntry strokeWidth="1" strokeColor="#F478B7"></PaletteEntry>
<PaletteEntry tkCartesianPaletteEntry strokeWidth="1" strokeColor="#8278F3"></PaletteEntry>
<PaletteEntry tkCartesianPaletteEntry strokeWidth="1" strokeColor="#CA68FF"></PaletteEntry>
</Palette>
</RadCartesianChart>
</GridLayout>
</GridLayout>
</StackLayout>


//annual-report.component.ts
import {
    Component, ElementRef, ViewChild,
    Injectable, OnInit, ChangeDetectorRef, AfterViewInit
} from '@angular/core';
import { ObservableArray } from 'data/observable-array';
import * as _ from 'lodash';
import { LoaderService } from '../../../service/core/loader';
import { Page } from 'ui/page';
import { BaseComponent } from '../../shared/base.component';
import { ChartApi } from '../../../api/accounting/api/ChartApi';

@Component({
    selector: 'gpm-annual-report',
    templateUrl: './component/report/annual-report/annual-report.component.html',
    styleUrls: ['./component/report/annual-report/annual-report.component.css'],
    providers: [ChartApi]
})

@Injectable()
export class AnnualReportComponent extends BaseComponent implements OnInit {
    categoricalSource;
    showIncome: boolean = true;
    showExpense: boolean = true;
    showBalance: boolean = true;
    showTotalBalance: boolean = true;
    showIncomeList: boolean;
    showExpenseList: boolean;
    showBalanceList: boolean;
    showTotalBalanceList: boolean;

    incomeIcon: string = 'fa-eye';
    expenseIcon: string = 'fa-eye';
    balanceIcon: string = 'fa-eye';
    totalbalanceIcon: string = 'fa-eye';

    year: number = this.getCurrentYear();
    periodCategory: Array<any>;
    dataSets;
    yearSelectedIndex: number;

    constructor(private chartApi: ChartApi, page: Page, loader: LoaderService) {
        super(page, loader);
    }
    getCurrentYear() {
        let date = new Date();
        let year = date.getFullYear();
        return year;
    };
    ngOnInit() {
        this.showIncomeList = true;
        this.getEffectiveDate();
        this.search();
    }
    getEffectiveDate() {
        this.chartApi.chartGetEffectiveDate()
            .subscribe(
            data => {
                let effectiveDateStart: any = data[0];
                let effectiveDateEnd: any = data[1];
                let startYear: number = (new Date(effectiveDateStart)).getFullYear();
                let endYear: number = (new Date(effectiveDateEnd)).getFullYear();
                // let temp = [];
                let temp = [startYear.toString() + '年'];
                // this.periodCategory = [startYear.toString()];
                for (let i = 0; i < endYear - startYear; i++) {
                    let year: string = (startYear + i + 1).toString() + '年';
                    temp.push(year);
                }
                this.periodCategory = temp;
                this.yearSelectedIndex = temp.length - 1;
            });

    }

    public onChange(index) {
        this.year = parseInt(this.periodCategory[index], 10);
        this.search();
    }
    search() {
        console.log('search');
        this.chartApi.chartYearSummarizing(this.year)
            .subscribe(
            data => {
                this.dataSets = _.cloneDeep(data);
                let temp = [];
                console.log('111', JSON.stringify(data));
                for (let i = 0; i < 12; i++) {
                    temp.push({
                        month: data.xValues[i],
                        income: data.series[0][i],
                        expense: data.series[1][i],
                        balance: data.series[2][i],
                        totalBalance: data.series[3][i]
                    });
                }
                this.categoricalSource = temp;
                let testList = this.categoricalSource;
                console.log('this._categoricalSource', JSON.stringify(temp));
            },
            req => {
                if (req._body && req._body.errors) {
                    this.showError(req._body.errors);
                } else {
                    this.showError(JSON.stringify(req));
                }
            }
            );
    }

    hideCertain() {
        let newDataSet = _.cloneDeep(this.dataSets);
        let temp = [];
        for (let i = 0; i < 12; i++) {
            temp.push({
                month: newDataSet.xValues[i],
                income: this.showIncome ? newDataSet.series[0][i] : 0,
                expense: this.showExpense ? newDataSet.series[1][i] : 0,
                balance: this.showBalance ? newDataSet.series[2][i] : 0,
                totalBalance: this.showTotalBalance ? newDataSet.series[3][i] : 0
            });
        }
        console.log('newDataSet', JSON.stringify(temp));
        this.categoricalSource = temp;
        console.log('this._categoricalSource', this.categoricalSource);
    }

    public changeIncomeStatus() {
        this.showIncome = !this.showIncome;
        if (this.showIncome) {
            this.incomeIcon = 'fa-eye';
            this.hideCertain();

        } else {
            this.incomeIcon = 'fa-eye-slash';
            // this.showIncomeList = false;
            console.log('this.showIncomeListfalse', this.showIncomeList);
            this.hideCertain();
        }
    }
    public changeExpenseStatus() {
        this.showExpense = !this.showExpense;
        if (this.showExpense) {
            this.expenseIcon = 'fa-eye';
            this.hideCertain();
        } else {
            this.expenseIcon = 'fa-eye-slash';
            this.hideCertain();
        }
    }
    public changeBalanceStatus() {
        this.showBalance = !this.showBalance;
        if (this.showBalance) {
            this.balanceIcon = 'fa-eye';
            this.hideCertain();
        } else {
            this.balanceIcon = 'fa-eye-slash';
            this.hideCertain();
        }
    }
    public changeTotalBalanceStatus() {
        this.showTotalBalance = !this.showTotalBalance;
        if (this.showTotalBalance) {
            this.totalbalanceIcon = 'fa-eye';
            this.hideCertain();
        } else {
            this.totalbalanceIcon = 'fa-eye-slash';
            this.hideCertain();
        }
    }
}

//the data in the year of 2016 as follows 
//categoricalSource
[{"month":"1","income":0,"expense":0,"balance":0,"totalBalance":0},{"month":"2","income":0,"expense":0,"balance":0,"totalBalance":0},{"month":"3","income":0,"expense":0,"balance":0,"totalBalance":0},{"month":"4","income":0,"expense":0,"balance":0,"totalBalance":0},{"month":"5","income":0,"expense":0,"balance":0,"totalBalance":0},{"month":"6","income":0,"expense":0,"balance":0,"totalBalance":0},{"month":"7","income":0,"expense":0,"balance":0,"totalBalance":0},{"month":"8","income":0,"expense":0,"balance":0,"totalBalance":0},{"month":"9","income":0,"expense":0,"balance":0,"totalBalance":0},{"month":"10","income":700,"expense":0,"balance":700,"totalBalance":700},{"month":"11","income":4123,"expense":6055,"balance":-1932,"totalBalance":-1232},{"month":"12","income":0,"expense":0,"balance":0,"totalBalance":-1232}]

[Nikolay Tsonev]

Hi,
Thank you for your interest in UI for NativeScript.
I tried to recreate your problem, but  there are some missing resources, which prevents me from debugging further your problem.
Nevertheless I remove some part of your code and verify if the colors of the LineSeries has been applied correctly and everything seems to work as expected. that I would help if you could send to us missing resources: the iconFont, you are using in your project and missing CSS code, where has been used to style your Labels.
It would also help if you could also send us the image, which you has suggested in your comment.

I look forward to hearing from you.
Regards,
nikolay.tsonev
Telerik by Progress

[License]

Hello,

I tried to push a project to github.The address is :https://github.com/ITonly/sample-chart.git. You can just look at component/report/annual-report.The result is in the attached files.

[Nikolay Tsonev]

Hi,
Thank you for sending us the missing code.

After I include the missing code in my sample project, was able to reproduce your problem. The issue has been caused due to the fact that you have defined only one Palette for all of your LineSeries. This will cause to adding the correct color only for the first Series. To be able to fix the problem, you should define for every LineSeries new Palette, then the colors will be applied correctly. part is to add unique seriesName for every Series. I am attaching sample code related your code, where this problem has been fixed.


HTML

<StackLayout orientation="vertical">
    <StackLayout>
        <StackLayout class="hr-light m-b-5 m-t-15"></StackLayout>
        <GridLayout columns="*, *, *" rows="auto">
            <DropDown row='0' col='1' #year class=" h3 vr-center text-center btn-small btn-secondary" [items]="periodCategory" [selectedIndex]="yearSelectedIndex"
                (selectedIndexChange)="onChange(year.selectedIndex)">
            </DropDown>
        </GridLayout>
        <StackLayout class="hr-light m-t-5 m-b-15"></StackLayout>
    </StackLayout>
    <GridLayout height="70%" columns="*,*,*,*" rows="auto,*">
        <StackLayout class="stackLayout" orientation="vertical" row="0" col="0">
            <Label class="fa icon icon-income text-center" text="{{ incomeIcon | fonticon}}" (tap)="changeIncomeStatus()"></Label>
            <Label class="label h4 text-center" text="收入"></Label>
        </StackLayout>
        <StackLayout class="stackLayout" orientation="vertical" row="0" col="1">
            <Label class="fa icon icon-expense text-center" text="{{ incomeIcon | fonticon}}" (tap)="changeExpenseStatus()"></Label>
            <Label class="label h4 text-center" text="支出"></Label>
        </StackLayout>
        <StackLayout class="stackLayout" orientation="vertical" row="0" col="2">
            <Label class="fa icon icon-balance text-center" text="{{ incomeIcon | fonticon}}" (tap)="changeBalanceStatus()"></Label>
            <Label class="label h4 text-center" text="月收支差"></Label>
        </StackLayout>
        <StackLayout class="stackLayout" orientation="vertical" row="0" col="3">
            <Label class="fa icon icon-totalbalance text-center" text="{{ incomeIcon | fonticon}}" (tap)="changeTotalBalanceStatus()"></Label>
            <Label class="label h4 text-center" text="总收支差"></Label>
        </StackLayout>
        <GridLayout class="m-t-10" row="1" col="0" colSpan="4" width="300">
            <RadCartesianChart exampleTitle toggleNavButton>
                <CategoricalAxis tkCartesianHorizontalAxis labelSize="14" lineThickness="3" lineColor="Grey"></CategoricalAxis>
                <LinearAxis tkCartesianVerticalAxis></LinearAxis>
                <LineSeries tkCartesianSeries seriesName="tagName" [items]="categoricalSource" categoryProperty="month" valueProperty="income"></LineSeries>
                <Trackball tkCartesianTrackball snapMode="AllClosestPoints" showIntersectionPoints="true"></Trackball>
                <LineSeries tkCartesianSeries seriesName="tagName2" [items]="categoricalSource" categoryProperty="month" valueProperty="expense"></LineSeries>
                <Trackball tkCartesianTrackball snapMode="AllClosestPoints" showIntersectionPoints="true"></Trackball>
                <LineSeries tkCartesianSeries seriesName="tagName3" [items]="categoricalSource" categoryProperty="month" valueProperty="balance"></LineSeries>
                <Trackball tkCartesianTrackball snapMode="AllClosestPoints" showIntersectionPoints="true"></Trackball>
                <LineSeries tkCartesianSeries seriesName="tagName4" [items]="categoricalSource" categoryProperty="month" valueProperty="totalBalance"></LineSeries>
                <Trackball tkCartesianTrackball snapMode="AllClosestPoints" showIntersectionPoints="true"></Trackball>
                <Palette tkCartesianPalette seriesName="tagName">
                    <PaletteEntry tkCartesianPaletteEntry strokeWidth="1" strokeColor="#92E7C4"></PaletteEntry>
                </Palette>
                <Palette tkCartesianPalette seriesName="tagName2">
                    <PaletteEntry tkCartesianPaletteEntry strokeWidth="1" strokeColor="#F478B7"></PaletteEntry>
                </Palette>
                <Palette tkCartesianPalette seriesName="tagName3">
                    <PaletteEntry tkCartesianPaletteEntry strokeWidth="1" strokeColor="#8278F3"></PaletteEntry>
                </Palette>
                <Palette tkCartesianPalette seriesName="tagName4">
                    <PaletteEntry tkCartesianPaletteEntry strokeWidth="1" strokeColor="#CA68FF"></PaletteEntry>
                </Palette>
            </RadCartesianChart>
        </GridLayout>
    </GridLayout>
</StackLayout>

Hope this helps.

Regards,
nikolay.tsonev
Telerik by Progress