Search code examples
bindinguwpwinrt-xamldata-visualizationdatavisualization.toolkit

UWP StackedLineSeries doesn't show values


I am trying to use WinRTXamlToolkit.Controls.DataVisualization.UWP

trying to draw any of the stacked charts like this:

enter image description here

But only this comes out:

enter image description here

Please help me, I have to use stacked series but the framework doesn't act as it should be..


Solution

  • Since I don't know how you define the code behind, I just provide the sample code as follows which can create a StackedLineSeries chart successfully.

    XAML Code

    <Page
    x:Class="CStackLineChat.MainPage"
    ...
    xmlns:charting="using:WinRTXamlToolkit.Controls.DataVisualization.Charting" 
    mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Padding="50"  > 
        <charting:Chart x:Name="MyChart" Title="Stacked column Chart">
            <charting:StackedLineSeries>
                <charting:StackedLineSeries.SeriesDefinitions>
                    <charting:SeriesDefinition                       
                        DependentValuePath="Amount"   
                        IndependentValuePath="Name"
                        IsTapEnabled="True"
                        Title="Doodad"    />
                    <charting:SeriesDefinition
                        Title="Stan2"                      
                        DependentValuePath="Amount"
                        IndependentValuePath="Name"/>
                </charting:StackedLineSeries.SeriesDefinitions>
            </charting:StackedLineSeries> 
        </charting:Chart> 
    </Grid>
    </Page>
    

    Code behind

    public sealed partial class MainPage : Page
    {
        private Random _random = new Random();
        List<NameValueItem> Records = new List<NameValueItem>();
        List<NameValueItem> Records2 = new List<NameValueItem>();
        public MainPage()
        {
            this.InitializeComponent(); 
            for (int i = 0; i < 5; i++)
            {
                Records.Add(new NameValueItem { Name = "Name" + i, Amount = _random.Next(10, 100) });
                Records2.Add(new NameValueItem { Name = "Name" + i, Amount = _random.Next(10, 100) });
            }
            this.RunIfSelected(this.MyChart, () => ((StackedLineSeries)this.MyChart.Series[0]).SeriesDefinitions[0].ItemsSource = Records);
            this.RunIfSelected(this.MyChart, () => ((StackedLineSeries)this.MyChart.Series[0]).SeriesDefinitions[1].ItemsSource = Records2); 
        }
        private void RunIfSelected(UIElement element, Action action)
        {
            action.Invoke();
        } 
    }
    
    public class NameValueItem
    {
        public string Name { get; set; }
        public int Amount { get; set; }
    }
    

    And the result enter image description here

    Additionally, by testing on my side, it seems like DependentValuePath and IndependentValuePath properties can not directly binding in your scenario. The best way to use this package is to follow the official sample. Here is the chart sample.