Custom Chart Palette on XAML file

4 posts, 0 answers
  1. Iros
    Iros avatar
    4 posts
    Member since:
    Jul 2016

    Posted 22 May 2017 Link to this post

    Is there any properties about Palette for xaml ?
    I want to change the bar color. But I only find the method which use code behind(custom palette).
    My practice is not like the example provided on the official website.(http://docs.telerik.com/devtools/xamarin/controls/chart/how-to/chart-how-to-create-custom-palette)
    Can you help me if I want to change the bar color which use xaml?
    I hope it can be implemented like this:

    <telerikChart:ChartPalette>
        <telerikChart:PaletteEntry FillColor="Green"/>
        <telerikChart:PaletteEntry FillColor="Blue"/>
    </telerikChart:ChartPalette>
  2. Lance | Tech Support Engineer, Sr.
    Admin
    Lance | Tech Support Engineer, Sr. avatar
    753 posts

    Posted 23 May 2017 Link to this post

    Hello Iros,

    You can indeed set this in XAML as well, here's an example:

    <telerikChart:RadCartesianChart x:Name="chart" >
    <telerikChart:RadCartesianChart.Palette>
        <telerikChart:ChartPalette>
            <telerikChart:ChartPalette.Entries>
                <telerikChart:PaletteEntry FillColor="Red" StrokeColor="Blue"/>
                <telerikChart:PaletteEntry FillColor="Green" StrokeColor="Red" />
                <telerikChart:PaletteEntry FillColor="Blue" StrokeColor="Green" />
            </telerikChart:ChartPalette.Entries>
        </telerikChart:ChartPalette>
    </telerikChart:RadCartesianChart.Palette>
             
    <telerikChart:RadCartesianChart.BindingContext>
        <portable:ViewModel />
    </telerikChart:RadCartesianChart.BindingContext>
    <telerikChart:RadCartesianChart.HorizontalAxis>
        <telerikChart:CategoricalAxis />
    </telerikChart:RadCartesianChart.HorizontalAxis>
    <telerikChart:RadCartesianChart.VerticalAxis>
        <telerikChart:NumericalAxis />
    </telerikChart:RadCartesianChart.VerticalAxis>
    <telerikChart:RadCartesianChart.Series>
        <telerikChart:BarSeries CombineMode="Cluster"
                                CategoryBinding="Category"
                                ValueBinding="Value"
                                ItemsSource="{Binding Data1}" />
        <telerikChart:BarSeries CombineMode="Cluster"
                                CategoryBinding="Category"
                                ValueBinding="Value"
                                ItemsSource="{Binding Data2}" />
        <telerikChart:BarSeries CombineMode="Cluster"
                                CategoryBinding="Category"
                                ValueBinding="Value"
                                ItemsSource="{Binding Data3}" />
    </telerikChart:RadCartesianChart.Series>
    </telerikChart:RadCartesianChart>



    Here is the result at runtime:




    Attached is a runnable demo.

    Regards,
    Lance | Tech Support Engineer, Sr.
    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
  3. Iros
    Iros avatar
    4 posts
    Member since:
    Jul 2016

    Posted 24 May 2017 Link to this post

    Hello Lance , Thank you very much for the example app
  4. Raghavendra
    Raghavendra avatar
    1 posts
    Member since:
    Mar 2017

    Posted 06 Apr Link to this post

    Hi Lance thank you for help, actually this technique helped me achieving for scatter point series with different colour palettes, once again thank you.
Back to Top