Pie slices colors

2 posts, 1 answers
  1. License
    License avatar
    27 posts
    Member since:
    Oct 2016

    Posted 25 Oct Link to this post

    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
  2. Answer
    nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    70 posts

    Posted 25 Oct Link to this post

    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 and to specify PaletteEntry for every slice. Regarding to that important part is to set same seriesName for DonutSeries and for the Palette. For your convenience 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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top