RadPieChart DonutSeries slice colors

[Andrés]

I've been trying out the donut series of the pie chart and I wish to change the colors of the slices, according to the documentation this should work:

 

<RadPieChart height="300" allowAnimation="true" row="1">
   <DonutSeries seriesName="pie" tkPieSeries selectionMode="None" outerRadiusFactor="0.9" expandRadius="0.25" innerRadiusFactor="0.85"
    [items]="pieSource" valueProperty="data" legendLabel="name"></DonutSeries>
    <RadLegendView tkPieLegend position="Bottom" offsetOrigin="BottomLeft" width="110">
    </RadLegendView>

      <Palette tkPiePalette seriesName="pie">
          <PaletteEntry tkPiePaletteEntry fillColor="#ffff00" strokeColor="#000000">
          </PaletteEntry>
           <PaletteEntry tkPiePaletteEntry fillColor="#cc3399" strokeColor="#000000">
           </PaletteEntry>
            <PaletteEntry tkPiePaletteEntry fillColor="#ff6600" strokeColor="#000000">
            </PaletteEntry>
      </Palette>
</RadPieChart>

 

The colors of the slices are the same no matter what I do, what could be wrong here? thanks in advance

 

[Nikolay Tsonev]

Hi,

I reviewed your case, however was unable to reproduce this issue, while using the attached code.
While testing on my side it seems that color of the slices has been changed as expected for both iOS and Android. For your convenience I am attaching sample code, where has been used DotumSeries and ScreenShots the simulator.

HTML

<GridLayout orientation="vertical" rows="*" tkExampleTitle tkToggleNavButton>

    <RadPieChart height="300" allowAnimation="true" row="1">
        <DonutSeries seriesName="pie" tkPieSeries selectionMode="None" outerRadiusFactor="0.9" expandRadius="0.25" innerRadiusFactor="0.85"
            [items]="pieSource" valueProperty="Amount" legendLabel="Brand"></DonutSeries>
            <RadLegendView tkPieLegend position="Bottom" offsetOrigin="BottomLeft" width="110">
            </RadLegendView>
            <Palette tkPiePalette seriesName="pie">
                <PaletteEntry tkPiePaletteEntry fillColor="#ffff00" strokeColor="#000000">
                </PaletteEntry>
                <PaletteEntry tkPiePaletteEntry fillColor="#cc3399" strokeColor="#000000">
                </PaletteEntry>
                    <PaletteEntry tkPiePaletteEntry fillColor="#ff6600" strokeColor="#000000">
                    </PaletteEntry>
            </Palette>
        </RadPieChart>
</GridLayout>

TypeScript

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data-services/data.service';
import { Car } from '../data-services/car';
import { ObservableArray } from "data/observable-array";

@Component({
    moduleId: module.id,
    selector: 'tk-chart-styling-pie-series',
    providers: [DataService],
    templateUrl: 'chart-styling-pie-series.component.html'
})
export class ChartStylingPieSeriesComponent implements OnInit {
    public  pieSource: ObservableArray<Car>;

    constructor() {
        this.pieSource=new ObservableArray([
            { Brand: "Audi", Amount: 10 },
            { Brand: "Mercedes", Amount: 76 },
            { Brand: "Fiat", Amount: 60 }
            ])
    }



    ngOnInit() {
    }
}

To be able to investigate further this problem, it will help if you could send us sample project and to give us more info your environment (CLI, node, modules versions). 
Regards,
nikolay.tsonev
Telerik by Progress

[Andrés]

Thanks for your reply, I tried the code you provided in a blank project but also didn't work for me, I am using the Telerik Platform appBuilder desktop client for Mac and the project uses Nativescript version 2.3.0. this is the code I used

<GridLayout orientation="vertical" rows="*" tkExampleTitle tkToggleNavButton>

    <RadPieChart height="300" allowAnimation="true" row="1">
        <DonutSeries seriesName="pie" tkPieSeries selectionMode="None" outerRadiusFactor="0.9" expandRadius="0.25" innerRadiusFactor="0.85"
            [items]="pieSource" valueProperty="Amount" legendLabel="Brand"></DonutSeries>
            <RadLegendView tkPieLegend position="Bottom" offsetOrigin="BottomLeft" width="110">
            </RadLegendView>
            <Palette tkPiePalette seriesName="pie">
                <PaletteEntry tkPiePaletteEntry fillColor="#ffff00" strokeColor="#000000">
                </PaletteEntry>
                <PaletteEntry tkPiePaletteEntry fillColor="#cc3399" strokeColor="#000000">
                </PaletteEntry>
                    <PaletteEntry tkPiePaletteEntry fillColor="#ff6600" strokeColor="#000000">
                    </PaletteEntry>
            </Palette>
        </RadPieChart>
</GridLayout>

 

 

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../shared/data-service/data.service';
import { Car } from '../../shared/data-service/car';
import { ObservableArray } from "data/observable-array";



@Component({
    moduleId: module.id,
    selector: 'tk-chart-series-pie',
    providers: [DataService],
    templateUrl: 'home.component.html'
})
export class ChartSeriesPieComponent implements OnInit {
    public pieSource: ObservableArray<Car>;

    constructor(private _dataService: DataService) { }

    ngOnInit() {
        this.pieSource = new ObservableArray([
            { Brand: "Audi", Amount: 10},
            { Brand: "Mercedes", Amount: 76},
            { Brand: "Fiat", Amount: 76}
        ]);
    }

}

 

export class Car {
    constructor(public Brand?: string, public Amount?: number) {
    }
}

 

thanks for your help

 

[Nikolay Tsonev]

Hello,

Thank you for the sample code.

I reviewed your case again, I am still unable to reproduce this behavior on my side. 

To be able to investigate further your issue, it would help if you could give us your project package. file.

In the meantime, you could also the package., whether you are using  version of UI for NativeScirpt 1.5.1. I am also attaching the package.json  from my test project.

package.json

{
  "dependencies": {
    "@angular/core": "2.0.0",
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/router": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.23",
    "reflect-metadata": "^0.1.8",
    "nativescript-angular": "1.0.0",
    "tns-core-modules": "2.3.0",
    "nativescript-telerik-ui-pro":"1.5.1"
  },
  "devDependencies": {
    "babel-traverse": "6.8.0",
    "babel-types": "6.8.1",
    "babylon": "6.8.0",
    "codelyzer": "0.0.28",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "^0.3.2",
    "tslint": "^3.14.0",
    "typescript": "^1.8.10"
  }
}

l look forward to working with you

Regards,
nikolay.tsonev
Telerik by Progress

[Andrés]

Hi I checked the version and it seems to be the version 1.5.1 I followed the getting started instructions of the documentation and downloaded the nativescript-ui-pro.tgz file and modified the package.json like this: 

 

{
  "dependencies": {
    "@angular/core": "2.0.0",
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/router": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.23",
    "reflect-metadata": "^0.1.8",
    "nativescript-angular": "1.0.0",
    "tns-core-modules": "2.3.0",
    "nativescript-telerik-ui-pro": "file:nativescript-telerik-ui-pro.tgz"
  },
  "devDependencies": {
    "babel-traverse": "6.8.0",
    "babel-types": "6.8.1",
    "babylon": "6.8.0",
    "codelyzer": "0.0.28",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "^0.3.2",
    "tslint": "^3.14.0",
    "typescript": "^1.8.10"
  }
}

 

 

 

[Nikolay Tsonev]

Hello,

We investigated further your case and found that this issue could be related due to using NativeScirpt 2.3 with latest UI for NativeScirpt.
that, you could change the NativeScript version to 2.4 by opening the Properties of your project. This button should on the right side of the screen just below the name of your project. 

In the open window, you should find NativeScirpt version drop-down menu and to select  

The final step is to change the dependencies of your project package. file by following the attached example below:

package.json

{
  "dependencies": {
    "@angular/common": "2.3.1",
    "@angular/compiler": "2.3.1",
    "@angular/core": "2.3.1",
    "@angular/forms": "2.3.1",
    "@angular/http": "2.3.1",
    "@angular/platform-browser": "2.3.1",
    "@angular/platform-browser-dynamic": "2.3.1",
    "@angular/router": "3.3.1",
    "nativescript-angular": "1.3.0",
    "nativescript-telerik-ui-pro": "^1.5.1",
    "nativescript-theme-core": "^0.2.1",
    "reflect-metadata": "~0.1.8",
    "codelyzer": "0.0.28",
    "rxjs": "5.0.0-rc.4",
    "tns-core-modules": "2.4.2"
  },
  "devDependencies": {
    "babel-traverse": "6.21.0",
    "babel-types": "6.21.0",
    "babylon": "6.15.0",
    "lazy": "1.0.11",
    "nativescript-dev-android-snapshot": "^0.*.*",
    "nativescript-dev-typescript": "^0.3.2",
    "typescript": "~2.0.10",
    "zone.js": "~0.7.2"
  }
}

Then try to rebuild the project while using AppBuilder.

I am also attaching the code, which I use for testing

app.component.html

<GridLayout orientation="vertical" rows="*">

    <RadPieChart height="400" allowAnimation="true" row="0">
        <DonutSeries seriesName="pie" tkPieSeries selectionMode="None" outerRadiusFactor="0.9" expandRadius="0.25" innerRadiusFactor="0.85"
            [items]="pieSource" valueProperty="Amount" legendLabel="Brand"></DonutSeries>
            <RadLegendView tkPieLegend position="Bottom" offsetOrigin="BottomLeft" width="110">
            </RadLegendView>
            <Palette tkPiePalette seriesName="pie">
                <PaletteEntry tkPiePaletteEntry fillColor="#ffff00" strokeColor="#000000">
                </PaletteEntry>
                <PaletteEntry tkPiePaletteEntry fillColor="#cc3399" strokeColor="#000000">
                </PaletteEntry>
                    <PaletteEntry tkPiePaletteEntry fillColor="#ff6600" strokeColor="#000000">
                    </PaletteEntry>
            </Palette>
        </RadPieChart>
</GridLayout>

app.component.ts

import { Component } from "@angular/core";
import {ObservableArray} from "data/observable-array"

@Component({
  selector: "ns-main",
  templateUrl: "app.component.html"
})
export class AppComponent {
      public pieSource: ObservableArray<any>;

    constructor() { }

    ngOnInit() {
        this.pieSource = new ObservableArray([
            { Brand: "Audi", Amount: 10},
            { Brand: "Mercedes", Amount: 76},
            { Brand: "Fiat", Amount: 76}
        ]);
    }
}

Hope that this will resolve your issue.
Regards,
nikolay.tsonev
Telerik by Progress

[Andrés]

Hi, sadly this didn't work either in my project with the appBuilder client, but I tried creating a new project through nativescript CLI and your code worked perfectly. maybe there is some issue with the appBuilder client?

[Nikolay Tsonev]

Hello,

Indeed this could be related some issues with AppBuider IDE. 
that, you could try to reinstall the client by following the instructions bellow.

1. In your browser, navigate to https://platform.telerik.com and log in the Telerik Platform.
2. In the title bar, select Getting Started → Downloads.
3. Click Code.
4. Click Download for Desktop Client
5. Run the downloaded installable and complete the installation.

If this does not help you could also verify, whether you will have the same while using appBuilder CLI. You could do that by running npm install -g command. For more details, you could review the instructions here.

To create NativeScript app you could follow the instructions:
1.create new NativeScript Angular 2 app by using   create native <project_name> --template TypeScript.NG2.Empty command
2. open the project with some editor and delete folder.
3. in . drawer.component.ts and drawer.module.ts files replace -- with --ui-pro
4.delete drawer.component.js and drawer.module.js JavaScript files.
5. replace the code in app.component.ts , app.component.html and app.modules.ts files as following the below-attached ones.

app.component.html

<GridLayout orientation="vertical" rows="*">

    <RadPieChart height="400" allowAnimation="true" row="0">
        <DonutSeries seriesName="pie" tkPieSeries selectionMode="None" outerRadiusFactor="0.9" expandRadius="0.25" innerRadiusFactor="0.85"
            [items]="pieSource" valueProperty="Amount" legendLabel="Brand"></DonutSeries>
            <RadLegendView tkPieLegend position="Bottom" offsetOrigin="BottomLeft" width="110">
            </RadLegendView>
            <Palette tkPiePalette seriesName="pie">
                <PaletteEntry tkPiePaletteEntry fillColor="#ffff00" strokeColor="#000000">
                </PaletteEntry>
                <PaletteEntry tkPiePaletteEntry fillColor="#cc3399" strokeColor="#000000">
                </PaletteEntry>
                    <PaletteEntry tkPiePaletteEntry fillColor="#ff6600" strokeColor="#000000">
                    </PaletteEntry>
            </Palette>
        </RadPieChart>
</GridLayout>

app.component.ts

import {
    Component
}
from "@angular/core";

import {ObservableArray} from "data/observable-array"

@
Component({
    moduleId: module.id,
    selector: "ns-main",
    templateUrl: "app.component.html"
})
export class AppComponent {
    public pieSource: ObservableArray<any>;

    constructor() { }

    ngOnInit() {
        this.pieSource = new ObservableArray([
            { Brand: "Audi", Amount: 10},
            { Brand: "Mercedes", Amount: 76},
            { Brand: "Fiat", Amount: 76}
        ]);
    }
}

app.modules.ts

import {
    NgModule
}
from "@angular/core";

import {
    NativeScriptModule
}
from "nativescript-angular/platform";
import {
    NativeScriptRouterModule
}
from "nativescript-angular/router";

import {
    appRoutes
}
from "./app.routes";
import {
    AppComponent
}
from "./app.component";

import {
    DrawerMenuModule as NavigationModule
}
from "./navigation/drawer/drawer.module";

import { CHART_DIRECTIVES } from 'nativescript-telerik-ui-pro/chart/angular';

@
NgModule({
    imports: [
        NativeScriptModule,
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(appRoutes),
        NavigationModule
    ],
    declarations: [
        AppComponent,
        CHART_DIRECTIVES
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {}

6. run  in the console
7. at the end run appbuilder <platform_name which should deploy the app on the running simulator.

I have also tested on my side with appBuilder CLI and it seems to work as expected. It would help if you could provide info about the exact template, you are using and the steps you are using while creating the app.

Hope the suggestions will resolve this case.

nikolay.tsonev
Telerik by Progress

[Andrés]

Hi, I'm sorry for my late response. I haven't been able to try this out yet but I will as soon as I can, I'll let you know how it worked out. Thanks for all your help

[Andrés]

Hello, just wanted to give an updated on this topic I managed to find the problem. I was using the app companion to build and test my project, but when using a real device to try the app it worked perfectly.
Thanks for all your help

 

Regards.