Search code examples
c#wpfxamlchartswpftoolkit

Specify Y-axis minimum, maximum and grid lines for Bar chart

I have created bar chart control in wpf using system.windows.controls.datavisualization.toolkit dll. I want to specify the minimum and maximum for the Y axis.

Here the Bar-chart `

<Grid >
    <barChartToolkit:Chart Height="280" HorizontalAlignment="Stretch" Title="Resource Availability"  Name="columnChart" Background="White"  VerticalAlignment="Stretch"  Width="360">
        <barChartToolkit:ColumnSeries DependentValuePath="Value" IndependentValuePath="Name" ItemsSource="{Binding}"  Title="Resources" />
    </barChartToolkit:Chart>
</Grid>

` Now I'm created the list and binded DataContext of the chart

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        showColumnChart();
    }

    private void showColumnChart()
    {
        List<BarCHartData> valueList = new List<BarCHartData>();
        valueList.Add(new BarCHartData() { Name = "Developer", Value = 10 });
        valueList.Add(new BarCHartData() { Name = "Tester", Value = 20 });
        valueList.Add(new BarCHartData() { Name = "QA", Value = 30 });
        columnChart.DataContext = valueList;
    }

}

public class BarCHartData
{
    public string Name { get; set; }

    public int Value { get; set; }
}

here my bar chart plotting like below image enter image description here

I have tried with below code 

<Window x:Class="WpfToolkitChart.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:barChartToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit">

<Grid >
    <barChartToolkit:Chart Height="280" HorizontalAlignment="Stretch" Title="Resource Availability"  Name="columnChart" Background="White"  VerticalAlignment="Stretch"  Width="360">
        <barChartToolkit:ColumnSeries DependentValuePath="Value" IndependentValuePath="Name" ItemsSource="{Binding}"  Title="Resources" />
        <barChartToolkit:Chart.Axes>
            <barChartToolkit:LinearAxis Orientation="Y" Minimum="0" Maximum="100"/>
        </barChartToolkit:Chart.Axes>
    </barChartToolkit:Chart>
</Grid>

but this code removing the grid line of the graph like below image

enter image description here

how can i set the maximum and minimum value to the Y-Axis with the gridlines?

Solution

  • You just need to set ShowGridLines="True" in your LinearAxis:

    enter image description here

    XAML:

    <Window
    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:WpfApp55"
    xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
    x:Class="WpfApp55.MainWindow"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <x:Array x:Key="array1" Type="{x:Type local:BarChartData}">
        <local:BarChartData Name="Developer" Value="25" />
        <local:BarChartData Name="Tester" Value="50" />
        <local:BarChartData Name="QA" Value="75" />
    </x:Array>
</Window.Resources>

<Grid>

    <chartingToolkit:Chart Title="Sample Chart">
        <chartingToolkit:Chart.Axes>
            <chartingToolkit:LinearAxis Minimum="0" 
                                        Maximum="100" 
                                        Orientation="Y"
                                        ShowGridLines="True" />
        </chartingToolkit:Chart.Axes>
        <chartingToolkit:ColumnSeries DependentValuePath="Value" 
                                      IndependentValuePath="Name" 
                                      ItemsSource="{StaticResource array1}"/>
    </chartingToolkit:Chart>

</Grid>