Set individual bar color based on value in code

[Timothy]

HI.  I see an example of how to set the bar colors in XAML, is there a way to do it in code based on their value?

ChartSeries barSeries = this.chart.Series[0];
                barSeries.Chart.Name = "my chart";
                barSeries.ItemsSource = valueEnum;

I want to color each bar based on the value of the item but not sure how to access the individual bars.

[Victor]

Hello Timothy,

Thanks for writing.
You can specify the fill for each bar using the PointTemplates property of your bar series. You can add a DataTemplate to this collection and bind the fill of the bar to some color that changes dynamically based on what the bar represents.

Regards,
Victor
Telerik

[Manuel]

Hi Timothy,

I find a Silverlight sample i have adapted to Windows phone. it works with a viewmodel. If it can help you.

   MainPage.xaml (nothing in MainPage.xaml.cs)

the datacontext
<UserControl.DataContext>
    <local:ViewModel />
</UserControl.DataContext>

the chart

<telerikChart:RadCartesianChart Margin="12,0,0,0" x:Name="radChart1">
    <telerikChart:RadCartesianChart.Grid>
        <telerikChart:CartesianChartGrid StripLinesVisibility="Y">
            <telerikChart:CartesianChartGrid.YStripeBrushes>
                <SolidColorBrush Color="#FF222222"/>
                <SolidColorBrush Color="Transparent"/>
            </telerikChart:CartesianChartGrid.YStripeBrushes>
        </telerikChart:CartesianChartGrid>
    </telerikChart:RadCartesianChart.Grid>
    <telerikChart:RadCartesianChart.HorizontalAxis>
        <telerikChart:CategoricalAxis LineStroke="{StaticResource PhoneDisabledBrush}" LineThickness="2"/>

    </telerikChart:RadCartesianChart.HorizontalAxis>
    <telerikChart:RadCartesianChart.VerticalAxis>
        <telerikChart:LinearAxis LineStroke="{StaticResource PhoneDisabledBrush}" LineThickness="2"/>
    </telerikChart:RadCartesianChart.VerticalAxis>
    <telerikChart:BarSeries ValueBinding="Value" ItemsSource="{Binding Data}">
        <telerikChart:BarSeries.PointTemplate>
            <DataTemplate>
                <Rectangle Fill="{Binding DataItem.Color}"/>
            </DataTemplate>
        </telerikChart:BarSeries.PointTemplate>

    </telerikChart:BarSeries>
</telerikChart:RadCartesianChart>

ViewModel.cs

namespace MonGraphe {     public class ViewModel : ViewModelBase     {         public ViewModel()         {             List<ChartData> data = new List<ChartData>();             data.Add(new ChartData() { Value = 1, Color = new SolidColorBrush(Colors.Red) });             data.Add(new ChartData() { Value = 2, Color = new SolidColorBrush(Colors.Green) });             data.Add(new ChartData() { Value = 5, Color = new SolidColorBrush(Colors.Blue) });             data.Add(new ChartData() { Value = 11, Color = new SolidColorBrush(Colors.Yellow) });             this.Data = data;         }         public List<ChartData> Data         {             get;             set;         }     }     public class ChartData     {         public Brush Color         {             get;             set;         }         public double Value         {             get;             set;         }     } }

ViewModelBase.cs

public class ViewModelBase : INotifyPropertyChanged
{
    #region *** Notify ***

    public event PropertyChangedEventHandler PropertyChanged;

    public void RaisePropertyChanged(string propname)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propname));
        }
    }

    #endregion
}

Hope it helps

Best regards

Manuel PERPEN

[George]

I have a simple line series and I want to change say the color and shape of the last point in the line to something else. Can you please elaborate further how you can pro-grammatically change the color of a line point to something else using the PointTemplates collection? I cannot figure out how to implement this.

Thanks,

George

[Rosy Topchiyska]

Hello George,

Thank you for contacting us.

You can use the PointTemplateSelector property of the series to set a different template to the data points depending on your custom logic. First, you have to create a class that inherits from the DataTemplateSelector class and override its SelectTemplate method. Then set the PointTemplateSelector to an instance of this class. I have prepared a sample project that demonstrates how you can change the template for the last point.

I hope this was useful. Please, do not hesitate to contact us if you have further questions.

Regards,
Rositsa Topchiyska
Telerik

[George]

Thank Rositsa,

The example you have attached work. However I have a problem trying to implement it in the case where my horizontal axis is a DateTimeContinousAxis. In this case I can only produce a graph when the series line type is "LineSeries", "ScatterLineSeries" does not work, and the "LineSeries" does not accept XValueBinding and YValueBinding.

Can you please suggest an alternative way to handle the case where the horizontal axis os of DateTimeContinousAxis?

Regards,

George

**** Update: I managed to find a working solution, although the "LineSeries" does not support XValueBinding and YValueBinding in XAML code like the "ScatterLineSeries", you can assign these properties in code, so it now works OK.

<Controls:RadCartesianChart x:Name="FFAChart" Margin="0">
                    <Controls:RadCartesianChart.VerticalAxis>
                        <Controls:LinearAxis/>
                    </Controls:RadCartesianChart.VerticalAxis>
                    <Controls:RadCartesianChart.HorizontalAxis>
                        <Controls:DateTimeContinuousAxis LabelFitMode="Rotate" LabelFormat="MMM-yy"/>
                    </Controls:RadCartesianChart.HorizontalAxis>
                    <Controls:RadCartesianChart.Series>
                        <Controls:ScatterLineSeries Stroke="Orange" StrokeThickness="2" PointTemplateSelector="{StaticResource CustomPointTemplateSelector}"
                           XValueBinding="Date" YValueBinding="Value" Tag="Trade"/>
                    </Controls:RadCartesianChart.Series>
                    <Controls:RadCartesianChart.Behaviors>
                        <Controls:ChartPanAndZoomBehavior ZoomMode="Horizontal"  PanMode="Horizontal"/>
                    </Controls:RadCartesianChart.Behaviors>
                </Controls:RadCartesianChart>

[Rosy Topchiyska]

Hello George,

Thank you for the question.

The difference between Categorical and Scatter series is that while the Categorical Series needs one categorical axis and one numerical axis, the Scatter Series needs two numerical axes. That's why the Scatter Series introduces XValueBinding and YValueBinding properties.
Both the DateTimeCategoricalAxis and the DateTimeContinuousAxis are categorical axes, so they are incompatible with the Scatter Series.

I have modified the project from my previous answer to work with DateTimeContinuousAxis.

I hope this was useful. Please, let us know if you have further questions.

Regards,
Rositsa Topchiyska
Telerik

[George]

Thank you for your answer. I am afraid the attachment for the project modification you refer to is not in your post. Can you please publish it?

Regards,

George

[Rosy Topchiyska]

Hello George,

I am not sure if you can not find an attachment at all, or just the project in my post is not the right one. The attachment is just above the Reply button. I have downloaded and opened it and it is exactly the project I have referred to in my post. Just in case, I have attached the project again.

Please, let us know if you still have problems.

Regards,
Rositsa Topchiyska
Telerik