Pie slices colors

[License]

Why pie chart  the 9th's pie slice color is the same as the first one ?I want each of them is different from each other.How can I do that

[Nikolay Tsonev]

Hi,

Thank you for reporting your problem.

Indeed you could  specify the color of every slice color by manually setting the fillColor and strokeColor for every item from the PieChart. To do that you should use Palette component specify PaletteEntry for every slice. that important part is to set  seriesName for DonutSeries and for the Palette. For your I am attaching sample code. This functionality is supported only for vanilla JavaScript project at the moment. The next plugin release will provide this feature and for NativeScript Angular2 projects. You could keep track on the new features updates and fixes in our Release notes section.  We also have dedicated "What's new" blog article which can be found here.

XML

<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-telerik-ui-pro/chart" xmlns="http://www.nativescript.org/tns.xsd">
    <GridLayout orientation="vertical" rows="*, *">

    <chart:RadPieChart id="pieChart" height="300" allowAnimation="true" row="0">
        <chart:RadPieChart.series>
            <chart:PieSeries selectionMode="DataPoint" expandRadius="0.4" outerRadiusFactor="0.7" items="{{ pieSource }}" valueProperty="Amount" legendLabel="Brand">
            </chart:PieSeries>
        </chart:RadPieChart.series>

        <chart:RadPieChart.legend>
            <chart:RadLegendView position="Floating" offsetOrigin="TopRight"  width="110"/>
        </chart:RadPieChart.legend>
    </chart:RadPieChart>

    <chart:RadPieChart id="donutChart" height="300"  allowAnimation="true" row="1">
        <chart:RadPieChart.series>
            <chart:DonutSeries seriesName="Pie1" selectionMode="DataPoint" outerRadiusFactor="0.9" expandRadius="0.4"  outerRadiusFactor="0.7" innerRadiusFactor="0.4" items="{{ pieSource }}" valueProperty="Amount" legendLabel="Brand">
            </chart:DonutSeries>
        </chart:RadPieChart.series>

        <chart:RadPieChart.legend>
            <chart:RadLegendView position="Floating" offsetOrigin="TopRight"  width="110"/>
        </chart:RadPieChart.legend>
        <chart:RadCartesianChart.palettes>
       <chart:Palette seriesName="Pie1">
           <chart:Palette.entries>
               <chart:PaletteEntry fillColor="Green" strokeColor="#80E2A1F8"/>
               <chart:PaletteEntry fillColor="Red" strokeColor="#80E2A1F8"/>
               <chart:PaletteEntry fillColor="Blue" strokeColor="#80E2A1F8"/>
               <chart:PaletteEntry fillColor="Yellow" strokeColor="#80E2A1F8"/>
               <chart:PaletteEntry fillColor="Pink" strokeColor="#80E2A1F8"/>
                <chart:PaletteEntry fillColor="#42f462" strokeColor="#80E2A1F8"/>
                <chart:PaletteEntry fillColor="#6b42f4" strokeColor="#80E2A1F8"/>
                <chart:PaletteEntry fillColor="#f4427a" strokeColor="#80E2A1F8"/>
                <chart:PaletteEntry fillColor="#f45042" strokeColor="#80E2A1F8"/>
           </chart:Palette.entries>
       </chart:Palette>
   </chart:RadCartesianChart.palettes>

    </chart:RadPieChart>
    </GridLayout>
</navigation:ExamplePage>

Hope this information helps.

Regards,
nikolay.tsonev
Telerik by Progress