how to specify the width of Bar appearance in BarSeries

[Xiufeng]

Hi,

Is there anyway to specify the width of Bar in BarSeries?  The following code shows the bar. Since I only have one datapoint binding, the bar is too wide. Thanks for your input.

<telerik:RadCartesianChart x:Name="radChart">

 

<telerikChart:BarSeries ItemsSource="{Binding ChartDatas}" ValueBinding="Quantity" CategoryBinding="DatePeriodId">

 

<telerikChart:BarSeries.PointTemplate>

 

<DataTemplate>

<Rectangle Fill="#FF2B7DDF"/>

</DataTemplate>

 

</telerikChart:BarSeries.PointTemplate>

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

[Rosko]

Hi Xiufeng,

If in your scenario you are using only one datapoint in a bar series, I would advice you to use RadBulletGraph. Here is an onlinde demo and online documentation. You may also use RadDataBar instead - here are the links to the online demo and online documentation.

How to change(style) the bar please check the code snippets below:

<UserControl.Resources>
   <DataTemplate x:Key="template1">
      <Rectangle Fill="Blue" Width="5"/>
   </DataTemplate>
</UserControl.Resources>

<telerik:BarSeries ItemsSource="{Binding Data}"
             ValueBinding="Value"
             CategoryBinding="Category"
             PointTemplate="{StaticResource template1}"/>

Regards,

Rosko

the Telerik team

[yang]

Hi Rosko,

After I applied DatapointTemplate("  <Rectangle Width="30" Fill="{Binding Presenter,Converter={StaticResource PaletteExtractorConverter}}"/>"),result as below,I want every category bars to be together,not seperate,how can i achieve it?

[Petar Marchev]

Hi Yang,

You need to have two different templates for this. In one of the templates, the Rectangle element needs to have horizontal alignment Right, where the other need Left. I hope this information suffices.

Regards,
Petar Marchev
Telerik

 

 

[yang]

hi,

thanks for your reply,but the number of barseries is variable,2,3,5 or more,your solution is fit for 2 barseries,isn't it?

any solution? 

thank you

[Petar Marchev]

Hi Yang,

Yes, I proposed this solution based on the fact that there are two bar series in the image you attached.

If you have more than 2 series, the Width=20 work-around will not work. I will explain why. The categorical axis divides the available space equally amongst all categories. In a single category slot, each bar gets the same space. It is important to understand that the axis does not ask the bars how wide they are, instead it specifies where a bar should be positioned.

With the previous work-around, where we set the width of the Rectangle, it only appeared as if the bar was 20 pixels wide. In reality, the bar, which is presented by a ContentPresenter was much larger, but the visible part of it, namely the Rectangle, was smaller.

So, now you see that Width work-around and more than 2 series do not mix. I suggest you simply do not force the bars to have a certain width, because in the general case it would not look good - if you have a fre items, the distance between the bars will be huge and the chart will look empty. If you have many items, the bars will begin to overlap. 

An alternative is to try set the GapLength property of the axis. However, the GapLength is in relative measures, from 0 to 1, and if you demand keeping the bars 20 pixels wide, you will need to make some non-trivial calculations based on the size of the plot area and number of categories in the axis. 

Regards,
Petar Marchev
Telerik