DefaultVisualStyle with 2 BarSeries

[Philipp]

Hi,

I'm new to the Telerik-UI components.

I tried to make a charts which shows Incomes and Expenses as Bars next to each other for each month in a year.

The chart itself works perfectly, but unfortunately I can't change the color of the expense bar-series.

My Income should be LightGreen and my expenses IndianRed. 

This is my xaml:

<telerikChart:RadCartesianChart x:Name="MoneyflowChart" Grid.Row="1" Grid.Column="0"
                                            HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,20,0,0" Height="600">
                <telerikChart:RadCartesianChart.HorizontalAxis>
                    <telerikChart:CategoricalAxis>
                        <telerikChart:CategoricalAxis.LabelFormatter>
                            <formatter:MonthStringLabelFormatter/>
                        </telerikChart:CategoricalAxis.LabelFormatter>
                    </telerikChart:CategoricalAxis>
                </telerikChart:RadCartesianChart.HorizontalAxis>
                <telerikChart:RadCartesianChart.VerticalAxis>
                    <telerikChart:LinearAxis/>
                </telerikChart:RadCartesianChart.VerticalAxis>
                <!--bar series for income-->
                <telerikChart:BarSeries ShowLabels="True">
                    <telerikChart:BarSeries.DefaultVisualStyle>
                        <Style TargetType="Border">
                            <Setter Property="Background" Value="LightGreen"/>
                        </Style>
                    </telerikChart:BarSeries.DefaultVisualStyle>
                    <telerikChart:BarSeries.CategoryBinding>
                        <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
                    </telerikChart:BarSeries.CategoryBinding>
                    <telerikChart:BarSeries.ValueBinding>
                        <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
                    </telerikChart:BarSeries.ValueBinding>
                </telerikChart:BarSeries>
                <!--bar series for expenses-->
                <telerikChart:BarSeries ShowLabels="True">
                    <telerikChart:BarSeries.DefaultVisualStyle>
                        <Style TargetType="Border">
                            <Setter Property="Background" Value="IndianRed"/>
                        </Style>
                    </telerikChart:BarSeries.DefaultVisualStyle>
                    <telerikChart:BarSeries.CategoryBinding>
                        <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
                    </telerikChart:BarSeries.CategoryBinding>
                    <telerikChart:BarSeries.ValueBinding>
                        <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
                    </telerikChart:BarSeries.ValueBinding>
                </telerikChart:BarSeries>
            </telerikChart:RadCartesianChart>

 

Outcome is currently, that both Bars are showing in LightGreen. I attached a picture.

 

What am I doing wrong? Or is there another way to change the color specifically for each series?

 

[Didi]

Hello Philipp,

Thank you for the provided code and image.

I have tested the described scenario but I on my side the BarSeriesDefaultVisualStyle is applied as expected. Please take a look at the attached project and may I ask you to modify it according to your specific setup and send it back to me? In this way I could research it further. Note that you should open a support ticket and attach the project there because in the forum only image attachments are allowed.

Thank you in advance.

Regards,
Didi
Progress Telerik

[Philipp]

Hi Didi,

thank you for the test project. You are right. It works.
Finally I figured out why it didn't work for me:

I had a bug in my code when filling up the lists with the values per month.
I ended up with the "income"-series list to have all the entries and the second list for "expenses" had no entries at all.
So the chart only showed values from the income-series all over, which caused everything to show up light green - which completely makes sense.

My bad. Sorry ;)

Thanks a lot for looking into it!

Regards,
Philipp