[Solved] Stacked Bar Chart - Using an Image Resource for the XCategory label

[David]

Hi all,
I am just starting out with the Telerik controls, I come from an HTML/Javascript/CSS background and have very little experience with Silverlight. I am trying to create a stacked bar chart, I have a basic one working with this code - as I am a UI designer I am trying to build this declaratively before passing it off to our Dev team:

<Grid x:Name="LayoutRoot" Background="Transparent">

        <control:RadChart UseDefaultLayout="False" Width="100" Height="100" Background="Transparent" BorderBrush="Transparent">
            <StackPanel>
                <!--ChartTitle-->

                <!--ChartArea-->
                <chart:ChartArea MaxHeight="90" MaxWidth="100"  FontSize="8" BorderBrush="Transparent" Background="Transparent" FontWeight="Bold" FontFamily="Trebuchet MS">
                    <chart:ChartArea.AxisY>
                        <chart:AxisY ExtendDirection="Up"/>
                    </chart:ChartArea.AxisY>
                    <chart:ChartArea.AxisX>
                        <chart:AxisX AutoRange="True"/>
                    </chart:ChartArea.AxisX>
                    <chart:ChartArea.DataSeries>
                        <chart:DataSeries>
                            <chart:DataSeries.Definition >
                                <chart:StackedBarSeriesDefinition ShowItemLabels="False">
                                </chart:StackedBarSeriesDefinition>
                            </chart:DataSeries.Definition>
                            <chart:DataPoint YValue="34" XCategory="Supplier"/>
                            <chart:DataPoint YValue="11" XCategory="Buyer"/>
                        </chart:DataSeries>

                        <chart:DataSeries>
                            <chart:DataSeries.Definition>
                                <chart:StackedBarSeriesDefinition/>
                            </chart:DataSeries.Definition>
                            <chart:DataPoint YValue="11" XCategory="Supplier" />
                            <chart:DataPoint YValue="23" XCategory="Buyer" />
                        </chart:DataSeries>
                    </chart:ChartArea.DataSeries>

                </chart:ChartArea>
                <!--ChartArea-->
                <StackPanel.Background>
                    <ImageBrush ImageSource="/RadControlsSilverlightApp1;component/Images/kpi-box.png" />
                </StackPanel.Background>
            </StackPanel>
        </control:RadChart>
    </Grid>

What I'm trying to do at this point is replace the XCategory labels with 16x16 .png image icons, but I have no idea how to go about doing this.

Additionally, the bars are currently showing the numerical values over the bar, I can't figure out how to turn this off. What I want is the total number (for both items in an XCategory) to show up above the bar. Is this possible?

[Sia]

Hi David,

You can play with the position of the labels to achieve better visibility having such small size of your RadChart (100x100).

Here are my changes:

<control:RadChart UseDefaultLayout="False" Width="100" Height="100" Background="Transparent" BorderBrush="Transparent">
    <StackPanel>
        <!--ChartTitle-->

        <!--ChartArea-->
        <chart:ChartArea x:Name="RadChart1" MaxHeight="90" MaxWidth="100" FontSize="8" BorderBrush="Transparent" Background="Transparent" FontWeight="Bold" FontFamily="Trebuchet MS">
            <chart:ChartArea.AxisY>
                <chart:AxisY ExtendDirection="Up"/>
            </chart:ChartArea.AxisY>
            <chart:ChartArea.AxisX>
                <chart:AxisX AutoRange="True"/>
            </chart:ChartArea.AxisX>
            <chart:ChartArea.DataSeries>
                <chart:DataSeries>
                    <chart:DataSeries.Definition>
                    <chart:StackedBarSeriesDefinition>
                        <chart:StackedBarSeriesDefinition.LabelSettings>
                            <chart:BarLabelSettings LabelDisplayMode="Inside" />
                        </chart:StackedBarSeriesDefinition.LabelSettings>
                    </chart:StackedBarSeriesDefinition>
                </chart:DataSeries.Definition>
                    <chart:DataPoint YValue="34" XCategory="Supplier"/>
                    <chart:DataPoint YValue="11" XCategory="Buyer"/>
                </chart:DataSeries>

                <chart:DataSeries>
                    <chart:DataSeries.Definition>
                    <chart:StackedBarSeriesDefinition>
                        <chart:StackedBarSeriesDefinition.LabelSettings>
                            <chart:BarLabelSettings LabelDisplayMode="Outside" />
                        </chart:StackedBarSeriesDefinition.LabelSettings>
                    </chart:StackedBarSeriesDefinition>
                </chart:DataSeries.Definition>
                    <chart:DataPoint YValue="11" XCategory="Supplier" />
                    <chart:DataPoint YValue="23" XCategory="Buyer" />
                </chart:DataSeries>
            </chart:ChartArea.DataSeries>

        </chart:ChartArea>
        <!--ChartArea-->
        <StackPanel.Background>
            <ImageBrush ImageSource="/RadControlsSilverlightApp1;component/Images/kpi-box.png" />
        </StackPanel.Background>
    </StackPanel>
</control:RadChart>

Regarding your second question, at the moment it is not possible to replace the Axes' labels with images. I have logged this as feature request and you can vote for it in order to increase its priority.

Greetings,
Sia
the Telerik team