Draw chart with System.Windows.Controls.DataVisualization.Toolkit

Charles He-MSFT 96 Reputation points Microsoft Employee
2020-02-25T03:27:22.497+00:00

Source thread: Generating a graph using DataVisualization Charting in WPF, answered by Peter Fleischer.

I have a chart here:

3431-1540528.png

I want to get the same chart drawn with System.Windows.Controls.DataVisualization.Toolkit in WPF app, does anyone know how to do it?

Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,694 questions
0 comments No comments
{count} votes

Accepted answer
  1. Alex Li-MSFT 1,096 Reputation points
    2020-02-25T03:32:59.873+00:00

    Hi,

    Welcome to our Microsoft Q&A platform!

    start with this demo:

    Xaml:

    <Window x:Class="Window69"  
            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"  
            xmlns:local="clr-namespace:WpfApp1"  
            xmlns:dvc="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"  
            mc:Ignorable="d"  
            Title="Window69" Height="450" Width="800">  
      <Window.DataContext>  
        <local:Window69VM/>  
      </Window.DataContext>  
      <Grid x:Name="grd">  
        <dvc:Chart>  
          <dvc:Chart.Axes>  
            <dvc:CategoryAxis Orientation="X">  
              <dvc:CategoryAxis.AxisLabelStyle>  
                <Style x:Name="labelStyleX1" TargetType="Control">  
                  <Setter Property="FontSize" Value="15"/>  
                  <Setter Property="LayoutTransform" >  
                    <Setter.Value>  
                      <RotateTransform  Angle="-45" />  
                    </Setter.Value>  
                  </Setter>  
                  <Setter Property="Foreground" Value="Black"/>  
                </Style>  
              </dvc:CategoryAxis.AxisLabelStyle>  
            </dvc:CategoryAxis>  
          </dvc:Chart.Axes>  
          <dvc:Chart.Series>  
            <dvc:ColumnSeries ItemsSource="{Binding Line1}"   
                              DependentValuePath="Value"   
                              IndependentValuePath="Col">  
              <dvc:ColumnSeries.LegendItemStyle >  
                <Style TargetType="dvc:LegendItem">  
                  <Setter Property="Visibility" Value="Collapsed"/>  
                </Style>  
              </dvc:ColumnSeries.LegendItemStyle>  
              <dvc:ColumnSeries.DependentRangeAxis>  
                <dvc:LinearAxis Minimum="0" Maximum="200000" Orientation="Y"/>  
              </dvc:ColumnSeries.DependentRangeAxis>  
            </dvc:ColumnSeries>  
            <dvc:LineSeries ItemsSource="{Binding Line1}"   
                              DependentValuePath="Value"   
                              IndependentValuePath="Col">  
              <dvc:LineSeries.LegendItemStyle >  
                <Style TargetType="dvc:LegendItem">  
                  <Setter Property="Visibility" Value="Collapsed"/>  
                </Style>  
              </dvc:LineSeries.LegendItemStyle>  
            </dvc:LineSeries>  
          </dvc:Chart.Series>  
        </dvc:Chart>  
      </Grid>  
    </Window>  
    

    And classes:

    Public Class Window69VM  
      Public Sub New()  
        Line1.Add(New Data With {.Col = "N30U", .Value = 18000})  
        Line1.Add(New Data With {.Col = "LS10", .Value = 100})  
        Line1.Add(New Data With {.Col = "TN2U", .Value = 30000})  
        Line1.Add(New Data With {.Col = "KC9U", .Value = 100})  
        Line1.Add(New Data With {.Col = "PE3U", .Value = 10000})  
        Line1.Add(New Data With {.Col = "PA25U", .Value = 18000})  
        Line1.Add(New Data With {.Col = "BS1U", .Value = 100})  
        Line1.Add(New Data With {.Col = "38NU", .Value = 160000})  
        Line1.Add(New Data With {.Col = "LM8U", .Value = 30000})  
        Line1.Add(New Data With {.Col = "LT2U", .Value = 95000})  
      End Sub  
      Public Property Line1 As New List(Of Data)  
      Public Class Data  
        Public Property Value As Integer  
        Public Property Col As String  
      End Class  
    End Class  
    

    3441-1540772.png

    Thanks.


1 additional answer

Sort by: Most helpful
  1. Creus Gutierrez, Oscar 11 Reputation points
    2021-03-21T19:40:33.543+00:00

    Hi!
    I cannot reference this:
    xmlns:dvc="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

    What project reference should I include please?

    2 people found this answer helpful.