How to set two-valued columns on UWP chart

Question

I'm using winrt xaml toolkit column chart and i want to create a chart for degrees so i need to set min and max values for every name on the list and I couldn't find a way for that. Here's my code:

Xaml:

<charting:Chart x:Name="chart" FlowDirection="RightToLeft" HorizontalAlignment="Center" Width="800" VerticalAlignment="Top" Height="500" >
     <charting:ColumnSeries Title="month" IndependentValuePath="Name" DependentValuePath="Amount" IsSelectionEnabled="True"/>
 </charting:Chart>

C#

private void LoadChart()
{
    List<weather> list = new List<weather>();
    list.Add(new weather() { Name = "s1", Amount = 5.5 });
    (chart.Series[0] as ColumnSeries).ItemsSource = list;
}

I want it to be like this one in this picture:

You can't do that with `ColumnSeries`. The _hackish_ way of accomplishing this is to use a `StackedColumnSeries` with two `SeriesDefinition` and set the color for one of them to transparent. — jsanalytics, Oct 07 '17 at 23:42

score 1 · Accepted Answer · answered Oct 14 '17 at 12:58

Here, try this XAML-only sample:

XAML:

<Page x:Class="App8.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:chart="using:WinRTXamlToolkit.Controls.DataVisualization.Charting" 
    xmlns:local="using:App8"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Loaded="Page_Loaded">

    <Page.Resources>

        <local:WeatherCollection x:Key="data1">
            <local:Weather Month="Jan" MinAmount="1" MaxAmount="8"/>
            <local:Weather Month="Feb" MinAmount="3" MaxAmount="9"/>
            <local:Weather Month="Mar" MinAmount="7" MaxAmount="10"/>
            <local:Weather Month="Apr" MinAmount="8" MaxAmount="11"/>
            <local:Weather Month="May" MinAmount="10" MaxAmount="12"/>
            <local:Weather Month="Jun" MinAmount="13" MaxAmount="12"/>
            <local:Weather Month="Jul" MinAmount="15" MaxAmount="11"/>
            <local:Weather Month="Aug" MinAmount="12" MaxAmount="10"/>
            <local:Weather Month="Sep" MinAmount="10" MaxAmount="9"/>
            <local:Weather Month="Oct" MinAmount="9" MaxAmount="8"/>
            <local:Weather Month="Nov" MinAmount="7" MaxAmount="7"/>
            <local:Weather Month="Dec" MinAmount="3" MaxAmount="6"/>
        </local:WeatherCollection>

        <Style x:Key="Style1" TargetType="chart:ColumnDataPoint">
            <Setter Property="Background" Value="Transparent"/>
        </Style>

    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <chart:Chart Title="Sample Chart">
            <chart:StackedColumnSeries>
                <chart:SeriesDefinition ItemsSource="{StaticResource data1}"
                                        DependentValuePath="MinAmount"
                                        DataPointStyle="{StaticResource Style1}"
                                        IndependentValuePath="Month"/>
                <chart:SeriesDefinition ItemsSource="{StaticResource data1}"
                                        DependentValuePath="MaxAmount"
                                        IndependentValuePath="Month"
                                        Title="Temp(C)"/>
            </chart:StackedColumnSeries>
        </chart:Chart>

    </Grid>
</Page>

Model / ViewModel:

public class WeatherCollection : ObservableCollection<Weather>
{
}
public class Weather
{
    public string Month { get; set; }
    public double MaxAmount { get; set; }
    public double MinAmount { get; set; }
}

How to set two-valued columns on UWP chart

1 Answers1