Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Sachin
305
How to show Values on top of Columns in ColumnSeries
posted

Hi,

I am developing a Column Chart using XamDataChart V10.3. In this chart for each column i want to display it's corresponding values on top of each column.

Can anybody provide me a solution for it.

Below is the screen-shot which i want to show. I have got the solution of creating columnchart, but didn't find any property as such to show the corresponding values on top of each column

 

Thanks in advance.

Sachin.

Parents
  • 30692
    Suggested Answer
    Offline posted

    This is perhaps the simplest way of going about it:

    Xaml:

    <UserControl x:Class="SilverlightApplication144.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"
             xmlns:igChart="http://schemas.infragistics.com/xaml"
             xmlns:local="clr-namespace:SilverlightApplication144">
    <UserControl.Resources>
        <local:TestData x:Key="data" />
        
        <DataTemplate x:Name="textMarker">
            <TextBlock Text="{Binding Item.Value}" Margin="0,-20,0,0" />
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <igChart:XamDataChart x:Name="theChart">
            <igChart:XamDataChart.Axes>
                <igChart:NumericYAxis x:Name="yAxis" MinimumValue="0" MaximumValue="10" />
                <igChart:CategoryXAxis 
                    x:Name="xAxis"
                    ItemsSource="{StaticResource data}"
                    Label="{}{Label}"/>
            </igChart:XamDataChart.Axes>
            <igChart:XamDataChart.Series>
                <igChart:ColumnSeries
                    x:Name="series"
                    MarkerTemplate="{StaticResource textMarker}"
                    ItemsSource="{StaticResource data}"
                    XAxis="{Binding ElementName=xAxis}"
                    YAxis="{Binding ElementName=yAxis}"
                    ValueMemberPath="Value" />
            </igChart:XamDataChart.Series>
        </igChart:XamDataChart>
    </Grid>
</UserControl>


    And code behind

     public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }

    public class TestData
        : ObservableCollection<TestDataItem>
    {
        public TestData()
        {
            Add(new TestDataItem()
            {
                Label = "A",
                Value = 1
            });
            Add(new TestDataItem()
            {
                Label = "B",
                Value = 2
            });
            Add(new TestDataItem()
            {
                Label = "C",
                Value = 3
            });
            Add(new TestDataItem()
            {
                Label = "D",
                Value = 4
            });
        }
    }

    public class TestDataItem
    {
        public string Label { get; set; }
        public double Value { get; set; }
    }


    Hope this helps!
    -Graham

Reply Children