This is a migrated thread and some comments may be shown as answers.

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

1 Answer 78 Views
Chart
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 29 Jun 2010, 05:02 PM
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?

1 Answer, 1 is accepted

Sort by
0
Sia
Telerik team
answered on 01 Jul 2010, 12:07 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Chart
Asked by
David
Top achievements
Rank 1
Answers by
Sia
Telerik team
Share this question
or