Create BarSeries with 100% and Label

[Richard]

I am trying to create a horizontal BarSeries chart.  The width of the bar should be the size of the value, but I need a background to be a different color.  Much like a Stack100 barseries (NOTE: which I have not seen any example on how to get this to work yet, please post one, thanks).  I then want to apply a label which overlays the bar and is 100% the width.

I have attached an example.  As you will see the red bar (in the image) is based on Value, the blue background is 100% of the width of the chart, and the label can extend 100% the width of the chart.

Any ideas?

[Georgi]

Hi Richard,

Thank you for contacting us and for your question.

Basically you will need to add a decoration in the chart's owning panel for the background and to modify chart labels and bar series so that you achieve the desired scenario:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Border Background="{StaticResource PhoneAccentBrush}" Margin="24,0,28,76">
    </Border>
    <telerikChart:RadCartesianChart>
        <telerikChart:RadCartesianChart.HorizontalAxis>
            <telerikChart:LinearAxis LastLabelVisibility="Visible" LabelFitMode="MultiLine"/>
        </telerikChart:RadCartesianChart.HorizontalAxis>
        <telerikChart:RadCartesianChart.VerticalAxis>
            <telerikChart:CategoricalAxis/>
        </telerikChart:RadCartesianChart.VerticalAxis>
        <telerikChart:BarSeries CombineMode="Stack100" ShowLabels="True">
                    <telerikChart:BarSeries.DefaultVisualStyle>
                        <Style TargetType="Border">
                            <Setter Property="Background" Value="Red"/>
                        </Style>
                    </telerikChart:BarSeries.DefaultVisualStyle>
                        <telerikChart:BarSeries.LabelDefinitions>
                <telerikChart:ChartSeriesLabelDefinition HorizontalAlignment="Center"
                                                            VerticalAlignment="Center"/>
            </telerikChart:BarSeries.LabelDefinitions>
            <telerikCharting:CategoricalDataPoint Value="10" Label="Some very very very very long text"/>
            <telerikCharting:CategoricalDataPoint Value="20" Label="Some very very very very long text"/>
            <telerikCharting:CategoricalDataPoint Value="15" Label="Some very very very very long text"/>
        </telerikChart:BarSeries>
    </telerikChart:RadCartesianChart>
</Grid>

The Stacked 100% series are using actually a different "Combine Mode" so all you need to create such charts is to specify the desired CombineMode value. We have examples for Stacked Bar series in our examples application and all you need to specify is

<telerikChart:BarSeries CombineMode="Stack100"/>
<telerikChart:BarSeries CombineMode="Stack100"/>

instead of

<telerikChart:BarSeries CombineMode="Stack"/>
<telerikChart:BarSeries CombineMode="Stack"/>

Currently the chart does not support backgrounds and borders of its chart and plot areas for the sake of performance optimizations. We will consider adding such in the near future.

I hope this helps. Let me know if I can assist you further.

All the best,
Georgi
the Telerik team