how to specify the width of Bar appearance in BarSeries

6 posts, 0 answers
  1. Xiufeng
    Xiufeng avatar
    2 posts
    Member since:
    Jul 2012

    Posted 12 Jul 2012 Link to this post

    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>

  2. Rosko
    Admin
    Rosko avatar
    137 posts

    Posted 17 Jul 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. yang
    yang avatar
    2 posts
    Member since:
    Jan 2015

    Posted 27 Apr 2015 in reply to Rosko Link to this post

    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?

  5. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 29 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  6. yang
    yang avatar
    2 posts
    Member since:
    Jan 2015

    Posted 29 Apr 2015 in reply to Petar Marchev Link to this post

    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

  7. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 29 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
DevCraft banner