This is a migrated thread and some comments may be shown as answers.

BarSeries & PointSeries Setter

3 Answers 188 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Lee asked on 14 May 2014, 03:19 PM
Hi.

I wonder two thing.

1. I want to set BarWidth.

In case of PointSeries, < Setter Property="PointSize" Value=.../>

But I don't look for that.

2. I want to set Color of BarSeries & PointSeries.

The color is 'Stroke' in LineSeries.

------------------------------------------------------------------------------------------

I want that setting is available property.

3 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 19 May 2014, 10:42 AM
Hi Lee,

Let me get straight to your questions:
  1. I want to set BarWidth.
    In order to set a width for the bars in a BarSeries you can define a PointTemplate with a Border in it and set its MaxWidth. Here is an example in code:
    <telerik:BarSeries.PointTemplate>
        <DataTemplate>
            <Border Background="#5AA4D4" MaxWidth="20"></Border>
        </DataTemplate>
    </telerik:BarSeries.PointTemplate>
    However, keep in mind that the chart will calculate equal width for each category slot. Then for each category, part of this width will be given and distributed between the bars in the category. When you have fixed size for your bars and the chart is wide enough, the bars will be rendered with the defined size. Otherwise (if the bars cannot fit in the category slot) they will be resized.
    Basically if the total width of the bars in a category slot is bigger than the size allocated for rendering bars the width property from your DataTemplate will be ignored and those bars will be resized in order to fit in the category.
  2. I want to set Color of BarSeries PointSeries.
    To set a color for those types of series you can define DefaultVisualStyle for the series.
    PointSeries:
    <telerik:ScatterPointSeries.DefaultVisualStyle>
        <Style TargetType="Path">
            <Setter Property="Fill" Value="Red" />
        </Style>
    </telerik:ScatterPointSeries.DefaultVisualStyle>
    BarSeries:
    <telerik:BarSeries.DefaultVisualStyle>
        <Style TargetType="Border">
            <Setter Property="Background" Value="Red" />
        </Style>
    </telerik:BarSeries.DefaultVisualStyle>
    In your case you can set the Background of the bars in the PointTemplate instead of creating new visual style for the BarSeries.

You can also take a look at the Customizing CartesianChart Series help article.

Regards,
Martin
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Rodolfo
Top achievements
Rank 1
answered on 09 Aug 2019, 08:42 PM

Lets suppose that i want to change the color of the bar according to some data in the binding List.

Is there a way to do it ? Lets suppose i have to put good traffic in green and bad traffic in red. I have a column in the list that indicates the traffic direction: 0=up, 1=dawn, 2=unknown.

 

 

0
Martin Ivanov
Telerik team
answered on 14 Aug 2019, 08:21 AM

Hello Rodolfo,

To achieve you requirement you can use the DefaultVisualStyle property of the series. This way you can bind the Background of each bar. You can see this approach shown in the Binding the Color of Series Items article.

Regards, Martin Ivanov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Chart
Asked by
Lee
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Rodolfo
Top achievements
Rank 1
Share this question
or