WPF Toolkit 之 AreaSeries chart with DateTime Axis

By default, the WPF Toolkit chart displays physical points for each datapoint in the series. You can turn this off by setting the data point style:

var newSeries = new AreaSeries()
{
Title = categoryToAllocationList.Key,
Opacity = 1,
IndependentValuePath = "TimeSpan",
DependentValuePath = "AllocatedCores",
ItemsSource = categoryToAllocationList.Value,
HorizontalContentAlignment = HorizontalAlignment.Left
};

//Don't display physical points for each data point
var dataPointOpacitySetter = new Setter(OpacityProperty, 0.0);
var backgroundSetter = new Setter(BackgroundProperty, brushes[count]);
newSeries.DataPointStyle = new Style(typeof (AreaDataPoint))
{
Setters = { dataPointOpacitySetter, backgroundSetter }
};

//Make sure the color is not transparent among multiple area serieses
var pathOpacitySetter = new Setter(OpacityProperty, 1.0);
newSeries.PathStyle = new Style(typeof (Path))
{
Setters = { pathOpacitySetter }
};

myGridUsageChart.Series.Add(newSeries);

Please note TimeSpan property must be DateTime type.

<DVC:Chart Name="myXXXChart" Title="XXX Chart"
LegendTitle="XXX XXX" Margin="8,12,12,17" Grid.Column="1">

<DVC:Chart.Axes>
<DVC:DateTimeAxis Orientation="X" IntervalType="Hours" Interval="1">
<DVC:DateTimeAxis.AxisLabelStyle>
<Style TargetType="DVC:DateTimeAxisLabel">
<Setter Property="StringFormat" Value="{}{0:HH:mm}" />
</Style>
</DVC:DateTimeAxis.AxisLabelStyle>
</DVC:DateTimeAxis>
<DVC:LinearAxis Orientation="Y" ShowGridLines="False"
Visibility="Visible" />
</DVC:Chart.Axes>
<DVC:Chart.Series>
<DVC:AreaSeries Title="Series 1" IndependentValuePath="TimeSpan" DependentValuePath="AllocatedCores" Background="Orange" >
</DVC:AreaSeries>

<DVC:AreaSeries Title="Series 2" IndependentValuePath="TimeSpan" DependentValuePath="AllocatedCores" Background="Green" >

</DVC:AreaSeries>
</DVC:Chart.Series>
</DVC:Chart>