Custom Chart Palette on XAML file

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

    Posted 22 May 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
    393 posts

    Posted 23 May 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 Link to this post

    Hello Lance , Thank you very much for the example app
Back to Top