Chart Bar Width

[Sidney]

I'm using a very simple RadChart that has a StackedBar100SeriesDefinition.

My client has asked me to make the bar width an absolute value, because they do not like the scaling that is going on.  I have tried the ItemWidthPercent property and it is only relative and my client wants to be able to absolutely set the width for all bars in the chart.  (They have a settings window where they want to pick the width of the bars using a slider min:10 => max:120).  They want to set it to absolute integer values (in pixels)

From what I read on the forum setting the ItemWidthPercent property is the only way to set the width of a bar in the chart.  Is this true?  Could I not use Styles to set an absolute Width?

[Yavor]

Hello Sidney,

Bars' width is calculated dynamically according to other factors such as the axis range, ticks, etc. Setting the BarWidthPercent property will give the bars only a percentage of the space available between two ticks, but still they are calculated dynamically as before. One way of setting their width to fixed is to fix the other properties that the bar width depends on - the range, the step and the tick count. If these are fixed, the bar width will be fixed. For example if you want your bars to be 10% of the RadChart's size you can put these values into the AxisX:

<telerik:RadChart Name="RadChart1">
    <telerik:RadChart.DefaultView>
        <telerik:ChartDefaultView>
            <telerik:ChartDefaultView.ChartArea>
                <telerik:ChartArea>
                    <telerik:ChartArea.AxisX>
                        <telerik:AxisX AutoRange="False" MinValue="0" MaxValue="10" Step="1" />
                    </telerik:ChartArea.AxisX>
                </telerik:ChartArea>
            </telerik:ChartDefaultView.ChartArea>
        </telerik:ChartDefaultView>
    </telerik:RadChart.DefaultView>
</telerik:RadChart>

All the best,
Yavor Ivanov
the Telerik team

[D]

"Bars' width is calculated dynamically according to other factors such as the axis range, ticks, etc. "

What exactly are those other factors?  

[Georges Nguyen]

How can I use this to set the bar width when using an ItemMapping with DataPointMember.XCategory instead of XValue? Does MinValue, MaxValue, and Step still apply when using XCategory? It does not seem to. In my case, I would like to set the width of the bars to be constant, whether I have one category, two categories, or many categories. Thank you.

[Yavor]

Hello Georges Nguyen,

About bar width calculation:
The factors that determine the bars' width are complex. Starting with the space - it depends on the space reserved for the RadChart itself, then the default view takes away some of the space for drawing series to show up some of its elements like the chart legend, title, axis, labels and ticks. After the place for the plotting area is determined the actual width of the bars is calculated. Remember, that if nothing else is specified, the RadChart will try to display all series items on the screen (using sampling with default threshold of 200). The width depends of the axis range, the number of major / minor ticks and the ticks distance. After all these factors are taken into account, the bar width percent reduces the bar size by a percentage of the determined size.

About categorical chart and bars width:
When you are using categorical axis you are using text instead of numbers. So setting the MinValue, MaxValue and Step doesn't make sense when using categories. You can try using the auto range, which will split the available size evenly for your bars. If you are not happy with the auto range you can try the using a numerical values with proper grouping. This approach is demonstrated in this thread in our forum.

All the best,
Yavor Ivanov
the Telerik team

[Pablo]

Hi , I hope this helps. There is a way to manage the bar width manually. You can extend the BarSeriesDefinition Class.
Here is the Code.

public class OverlappedBarSeriesDefiniton : BarSeriesDefinition
    {
        public OverlappedBarSeriesDefiniton()
            : base()
        {
        }

        public double WidthPercentage { get; set; }

        public override IChartItem CreateChartItem()
        {
            Bar bar = new Bar();
            bar.RenderTransformOrigin = new Point(0.5, 0);
            bar.RenderTransform = new ScaleTransform { ScaleX = WidthPercentage / 100 };

            return bar;
        }
    }

// And use it like this
OverlappedBarSeriesDefiniton obs = new OverlappedBarSeriesDefiniton() { WidthPercentage = 40 };

[Donald]

Hi,guys.I am new!