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

2 posts, 0 answers
  1. David
    David avatar
    1 posts
    Member since:
    Jun 2010

    Posted 29 Jun 2010 Link to this post

    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?

  2. Sia
    Admin
    Sia avatar
    745 posts

    Posted 01 Jul 2010 Link to this post

    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
Back to Top