none
[UWP] Customizing Independent and Dependent Labels in WinRTXamlToolkit Charting RRS feed

  • Question

  • Hi Everyone

    I am kinda new in UWP. I mange to generate very simple column chart as is shown in the figure using WinRTXamlToolKit.Controls.DataVisualization.UWP

    Unfortunately, it seems that there is very much details in either the documentations and examples.

    I was unable to add Dependent data label (y axis label) and change size/weight of Independent data labels (x axis label).

    Would you mind please help to find the proper way of customizing the chart?

    Best Regards,

    Reza



    • Moved by Breeze Liu Thursday, November 30, 2017 9:43 AM off topic
    Tuesday, November 28, 2017 11:45 AM

All replies

  • Hi Reza Neam,

    We can add Axes in the Chart to show the "y axis label" like:

    <Charting:Chart.Axes>
        <Charting:LinearAxis x:Name="YAxis" Orientation="Y" Title="y axis" ShowGridLines="True" />
    </Charting:Chart.Axes>
    

    Then we can adjust the maximum and minimum in the behind code:

    YAxis.Maximum = 100;
    YAxis.Minimum = 0;
    YAxis.Interval = 10;
    

    When you want to add items at the X orientation. You can try to bind the ColumnSeries’s ItemsSource to a list which contains all the data(the name of the x axis label and the amount of it at y orientation) you want to show.

    According to the screenshot, I made a small sample here:

    In the xaml,

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Charting:Chart Title="Chart Title" x:Name="ColumnChart" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="100,100,0,0" Width="400" Height="400" >
            <Charting:ColumnSeries Title="Data1" Margin="0" IndependentValuePath="Name" DependentValuePath="Amount" IsSelectionEnabled="True"/>
            <Charting:ColumnSeries Title="Data2" Margin="0" IndependentValuePath="Name" DependentValuePath="Amount" IsSelectionEnabled="True"/>
            <Charting:ColumnSeries Title="Data3" Margin="0" IndependentValuePath="Name" DependentValuePath="Amount" IsSelectionEnabled="True"/>
    
            <Charting:Chart.Axes>
                <Charting:LinearAxis x:Name="YAxis" Orientation="Y" Title="y axis"  ShowGridLines="True" />
            </Charting:Chart.Axes>
        </Charting:Chart>
    </Grid>
    

    Code behind,

    private void LoadChartContents()
    {
        Random rand = new Random();
        List<FinancialStuff> financialStuffList = new List<FinancialStuff>();
    
        //The properties is corresponding to the IndependentValuePath and DependentValuePath in the Xaml
        financialStuffList.Add(new FinancialStuff() { Name = "27/11", Amount = rand.Next(0, 100) });
        financialStuffList.Add(new FinancialStuff() { Name = "24/11", Amount = rand.Next(0, 100) });
        financialStuffList.Add(new FinancialStuff() { Name = "21/11", Amount = rand.Next(0, 100) });
        financialStuffList.Add(new FinancialStuff() { Name = "18/11", Amount = rand.Next(0, 100) });
    
        (ColumnChart.Series[0] as ColumnSeries).ItemsSource = financialStuffList;
        (ColumnChart.Series[1] as ColumnSeries).ItemsSource = financialStuffList;
        (ColumnChart.Series[2] as ColumnSeries).ItemsSource = financialStuffList;
    
        //Change the rang of the YAxis
        YAxis.Maximum = 100;
        YAxis.Minimum = 0;
        YAxis.Interval = 10;
    }
    
    public class FinancialStuff
    {
        public string Name { get; set; }
        public int Amount { get; set; }
    }

    Best regards,

    Breeze


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, November 29, 2017 8:53 AM
  • Hi Breeze

    Thank you for your reply. It was very helpful.

    I mange to add the Y label as you explained and set the desired font format.

    I still have challenges with defining X Label font format (Style, Weight, Size); however I pass the values using binding and Items source as in below shown.

    May I ask to help with finding a solution for it?

    Best Regards

    Reza

    <charting:Chart x:Name="Report" Grid.Row="1" Grid.Column="1" Margin="16" Background="White" BorderThickness="3" BorderBrush="Gray">
                <charting:ColumnSeries  x:Name="Chart1" Title="Data 1" IndependentValueBinding="{Binding Name}"  FontSize="36" FontWeight="Bold" DependentValueBinding="{Binding Amount}"/>
                <charting:ColumnSeries  x:Name="Chart2" Title="Data 2" IndependentValueBinding="{Binding Name}" FontSize="36" FontWeight="Bold"  DependentValueBinding="{Binding Amount}" />
                <charting:ColumnSeries  x:Name="Chart3" Title="Data 3" IndependentValueBinding="{Binding Name}" FontSize="36" FontWeight="Bold" DependentValueBinding="{Binding Amount}" />
    
                <charting:Chart.Axes>
                    <charting:LinearAxis x:Name="YAxis" Orientation="Y" Title="   (%)"  ShowGridLines="True" FontStyle="Normal" FontWeight="Bold"/>
                </charting:Chart.Axes>
    
    </charting:Chart>

     void FillSampleDataChart2()
            {
    
                DateTime now = DateTime.Now;
                DateTime preDate;
    
                YAxis.Maximum = 100;
                YAxis.Minimum = 0;
                YAxis.Interval = 10;
    
                for (int i = 0; i < 3; i++)
                {
                    Random rand = new Random();
                    List<Records> records = new List<Records>();
    
                    int[] min = new int[3] { 0, 75, 30 };
                    int[] max = new int[3] { 60, 100, 90 };
    
    
                    for (int j = 0; j < 7; j++)
                    {
                        preDate = now - TimeSpan.FromDays(1 + (j * 3));
                        string dateval = string.Format("{0}{3}{1:d}/{2:d}", preDate.DayOfWeek, preDate.Day, preDate.Month, "\n");
                        records.Add(new Records() { Name = dateval, Amount = rand.Next(min[i], max[i]) });
                    }
    
                    ((ColumnSeries)Report.Series[i]).ItemsSource = records;
                    Report.FontWeight = FontWeights.Bold;
    
                }
            }

    Wednesday, November 29, 2017 10:53 AM
  • Hi Reza Neam,

    This is the Microsoft official developing UWP app forum, your issue is more about the third party APIs, I will off topic it. Thanks for your understanding.

    By the way, for IndependentValueBinding property's style, it is defined by ColumnSeries parent element Chart, so directly set the fontsize property for the ColumnSeries element will take no effect. Set the Fontsize for the chart element will work. So do the property FontStyle, but I have tested the FontWeight property, it can’t be changed. You can try this to change them:

    Report.FontStyle = FontStyle.Normal;
    Report.FontSize = 26;
    

    Moreover, if we set the chart’s property, the whole chart’s font format changes too(except title and Y Axis).

    Best regards,

    Breeze


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Thursday, November 30, 2017 9:42 AM