How to set the width of a BarSeries?

[Mark]

I have the code below which displays a BarSeries chart, but I cannot figure out how to set the width of the bar?

 

<telerikChart:RadCartesianChart x:Name="Devices"
                                Palette="{StaticResource BarGraphPalette}"
                                HeightRequest="{Binding DeviceSummary.Progression, Mode=OneWay, Converter={StaticResource listToHeightConverter}, ConverterParameter=50}">
    <telerikChart:RadCartesianChart.Grid>
        <telerikChart:CartesianChartGrid MajorLinesVisibility="None" MajorLineColor="Transparent"/>
    </telerikChart:RadCartesianChart.Grid>

    <telerikChart:RadCartesianChart.HorizontalAxis>
        <telerikChart:NumericalAxis  ShowLabels="True" />
    </telerikChart:RadCartesianChart.HorizontalAxis>

    <telerikChart:RadCartesianChart.VerticalAxis>
        <telerikChart:CategoricalAxis GapLength="0.3"
                                      ShowLabels="True"
                                      PlotMode="BetweenTicks"/>
    </telerikChart:RadCartesianChart.VerticalAxis>

    <telerikChart:RadCartesianChart.Series>
        <telerikChart:BarSeries ItemsSource="{Binding DeviceSummary.Progression}" ShowLabels="True" >
            <telerikChart:BarSeries.ValueBinding>
                <telerikChart:PropertyNameDataPointBinding PropertyName="Value" />
            </telerikChart:BarSeries.ValueBinding>
            <telerikChart:BarSeries.CategoryBinding>
                <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
            </telerikChart:BarSeries.CategoryBinding>
        </telerikChart:BarSeries>
    </telerikChart:RadCartesianChart.Series>

</telerikChart:RadCartesianChart>

[Petar Marchev]

Hi Mark,

I am a little unsure what is the final output you want to get.

First, I think you may be expecting the chart to let you decide the width of the bars, but this is not how the chart works. The chart calculates the available plot area, this is the space where the series are drawn. The size of the plot area is determined by the available size of the chart and the desired sizes of the axes. When the plot area size is available, the series are displayed inside. The width of the bar depends indirectly on that size, and directly on the axis slot length. The axis slot length is essentially the distance between two adjacent ticks on the axis.

In other words, the width of the bar is not input for arrangement, it is a result. So if you need to have 5 bars with 10 pixels width each, you need to ensure that the plot area is 50 pixels wide, which means you need to manipulate the actual width.

As I mentioned earlier I am a bit unsure what results you are after. I hope the explanations above are helpful. Let us know if you need more information.

Regards,
Petar Marchev
Telerik by Progress

[Mark]

Hello Petar,

I understand you answer, but here is my dilemma, I have a single horizontal bar that I need to be 5 pixels in height. Currently if I set the height (skinny long bar) of the RadCartesianChart to a height request of 5px, it cuts of the bottom label, as well as truncated the vertical label.

You could make the bar only 5 pixels high or wide in the UWP version by setting the BarSeries DefaultVisualStyle maxHeight property like so:

                        <telerikChart:BarSeries ItemsSource="{x:Bind ViewModel.OsSummary.Progression, Mode=OneWay}" ShowLabels="True" DefaultVisualStyle="{StaticResource OsBarGraphDefaultStyle}" Height="50">
                            <telerikChart:BarSeries.CategoryBinding>
                                <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/>
                            </telerikChart:BarSeries.CategoryBinding>
                            <telerikChart:BarSeries.ValueBinding>
                                <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
                            </telerikChart:BarSeries.ValueBinding>
                            <telerikChart:BarSeries.LabelDefinitions>
                                <telerikChart:ChartSeriesLabelDefinition HorizontalAlignment="Left" VerticalAlignment="Top" Template="{StaticResource OsBarGraphAxisLabelDataTemplate}"/>
                            </telerikChart:BarSeries.LabelDefinitions>
                        </telerikChart:BarSeries>

<Style x:Key="OsBarGraphDefaultStyle" TargetType="Border" BasedOn="{StaticResource BarGraphDefaultStyle}">
    <Setter Property="MaxHeight" Value="5" />
</Style>

[Petar Marchev]

Hello Mark,

If I understand correctly, you need the chart to resemble a grid with rows where each row contains a label and a bar. You can't just set the height of the bar, because this would leave thin bars far away from each other, their labels as well. This wouldn't result in a grid-like output.

In order to get something looking like rows, you need to ensure the size of the plot area. This is not an easy task because you need to look up the number of items in the items source and take into consideration the height of the horizontal axis. At the moment we do not have an API that would allow you to get the exact height of the plot area or horizontal axis, but you can use approximations.

Say that you have 34 items in your items source. And you want each row to be about 20 pixels high (so that the vertical axis labels do not overlap). You need the plot area to be 34*20 = 680 high. You need to account for the horizontal axis height, which you can approximate to 25 pixels. So the height of the chart should be 680+25 = 705.

This is a technique that will get you rows of 20 pixels. Obviously you can manipulate this number easily. Now, if you need to make the bars thinner, and keep the 20 pixel row height, you can try manipulating the GapLength property of the axis. This property defines in relative units between 0 and 1 the gap between two bars.

I hope this helps. If you need more information please provide us with some snapshots of what you currently have and a drawing of some sort that depicts the result you are after.

Regards,
Petar Marchev
Telerik by Progress

[Mark]

Thank you for that explanation Petar.

I do understand sizing the plot chart area, what I don't understand is sizing the actual bars. If you take a look at the attached screenshots of  UWP Telerik Charts, one is 5 px heigh while the other is 50. This is controlled by manipulating the DefaultVisualStyle border's width. I think we need the equivalent in the Telerik controls for Xamarin Forms to achieve the same effect.

 

DefaultVisualStyle (Style): Defines an entry point that may be used to change the appearance of the internally created visuals (if any). These visuals depend on the series type. For example, the BarSeries will create Border instances while financial series, like the CandlestickSeries, will create a special shape that represents the financial data in the best possible way.

The following code snippet demonstrates how to change the default appearance of the Border instances within a BarSeries.

<telerikChart:BarSeries>

    <telerikChart:BarSeries.DefaultVisualStyle>

        <Style TargetType="Border">

            <Setter Property="Background" Value="Red"/>

        </Style>

    </telerikChart:BarSeries.DefaultVisualStyle>

</telerikChart:BarSeries>

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

<telerikChart:BarSeries ItemsSource="{x:Bind data, Mode=OneWay}" ShowLabels="True" DefaultVisualStyle="{StaticResource OsBarGraphDefaultStyle}" Height="50">

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

 

<Style x:Key="BarGraphDefaultStyle" TargetType="Border">
    <Setter Property="MaxHeight" Value="12" />
    <Setter Property="BorderThickness" Value="2,0,2,0" />
    <Setter Property="Margin" Value="0,10,0,10" />
</Style>

<Style x:Key="RatingsBarGraphDefaultStyle" TargetType="Border" BasedOn="{StaticResource BarGraphDefaultStyle}">
    <Setter Property="MaxHeight" Value="5" />
    <Setter Property="Margin" Value="0,7,0,0" />
</Style>

<Style x:Key="OsBarGraphDefaultStyle" TargetType="Border" BasedOn="{StaticResource BarGraphDefaultStyle}">
    <Setter Property="MaxHeight" Value="5" />
</Style>

<Style x:Key="VerticalBarGraphDefaultStyle" TargetType="Border">
    <Setter Property="MaxWidth" Value="5" />
    <Setter Property="BorderThickness" Value="0" />
</Style>





[Petar Marchev]

Hello Mark,

There is no equivalent of the default visual style in the Xamarin Forms control.

Even if such a property existed, it's purpose is to control appearance, not size (at least not for the bar). If you try to enforce some size via the DefaultVisualStyle, this would collide with the arrange mechanism that the series has and the bar will not get rendered properly. For example if you try making it smaller (MaxWidth=5) it is not going to get centered on the axis slot.

I hope you understand that the chart really works the other way around - it does not ask the Border how large it wants to be and then center it in the axis slot. The chart calculates a size based on the axis slot and sets it to the border. The chart then positions the Border in the upper left corner of the resulting layout slot. If the border decides it wants to be smaller, then it is not going to be centered in the slot anymore.

I can't figure out what you want us to see in the image you attached. These do not look like charts, they look like progress bars. Even if this was a chart - there are two charts, not one. One chart is about 30 pixels high and the other is 200. This explains why one bar is thin, and the other not.

In order to have a bar with certain height, you need to calculate a proper chart size. If you need further assistance I will ask that you provide us with more information on the visual output you are after, more drawings and explanations.

Regards,
Petar Marchev
Telerik by Progress