How to remove border around LineGraph in WPF?

Question

How to remove border as shown in image?

I am trying to remove border around the image and tried some solutions like BorderBrush="Transparent" BorderThickness="0" but these solutions are not working. I want only graph part in my window. I am providing XAML and CS code. Please help me out with the solution.

XAML :

<Window x:Class="WpfToolkitChart.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="308.796" Width="436.419" Background="White"
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit">


    <Window.Resources>
        <Style x:Key="DataPointStyle1" TargetType="{x:Type chartingToolkit:LineDataPoint}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="chartingToolkit:LineDataPoint">
                        <Grid Margin="0,0,0,0">
                            <Ellipse Fill="#617D99" ToolTip="{Binding Y}"/>
                            <Canvas>
                                <Image Source="/Images/marker.png" Cursor="Hand" Height="40" Width="20" Margin="-6,-33,0,0" Visibility="{Binding BindingInfo}" ToolTip="You!!" />
                                <Ellipse  Fill="{Binding Info}" Height="10px" Width="10px" Margin="0,-20,0,0" />
                            </Canvas>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background" Value="#33557A"></Setter>
        </Style>
    </Window.Resources>

    <Grid Margin="0,0,0,0">
        <chartingToolkit:Chart  Name="lineChart" Title=""  VerticalAlignment="Top" Margin="0,0,0,0" FontSize="10px" Height="269" Foreground="Black"  Background="Transparent" 
                                BorderBrush="Transparent">
            <chartingToolkit:LineSeries Name="lp"
                                        DependentValuePath="Y" Margin="0,0,0,0"  IndependentValuePath="X" 
                                        ItemsSource="{Binding}" IsSelectionEnabled="True"
                                        DataPointStyle="{StaticResource DataPointStyle1}">
            </chartingToolkit:LineSeries>
            <chartingToolkit:Chart.Axes>
                <chartingToolkit:LinearAxis Orientation="Y" Visibility="Hidden"/>
            </chartingToolkit:Chart.Axes>
            <chartingToolkit:Chart.LegendStyle>
                <Style x:Name="LegendHideStyle1" TargetType="Control">
                    <Setter Property="Width" Value="0"/>
                    <Setter Property="Height" Value="0"/>
                </Style>
            </chartingToolkit:Chart.LegendStyle>
            <chartingToolkit:Chart.PlotAreaStyle>
                <Style TargetType="Grid">
                    <Setter Property="Background" Value="Transparent" />
                </Style>
            </chartingToolkit:Chart.PlotAreaStyle>
        </chartingToolkit:Chart>
    </Grid>
</Window>

CS:

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

            showColumnChart();
        }

        private void showColumnChart()
        {
            double y1 = 5, y2 = 1, y3 = 3, y4 =2;
            ObservableCollection<MyDataModelClass> data = new ObservableCollection<MyDataModelClass>{
            new MyDataModelClass {X = "A", Y = y1, BindingInfo = "Hidden" },
            new MyDataModelClass {X = "B", Y = y2, BindingInfo = "Hidden" },
            new MyDataModelClass {X = "C", Y = y3, BindingInfo = "Hidden" },
            new MyDataModelClass {X = "D", Y = y4, BindingInfo = "Visible" }
            };

            double max = data.Max(m => m.Y);
            double min = data.Min(m => m.Y);
            double Percentage = 15;

            double diff = max - min;
            double percetage = (Math.Abs(diff) / 100) * Percentage;
            double minVal = min - percetage;
            double maxVal = max + percetage;
            LinearAxis axis = new LinearAxis();
            axis.Orientation = AxisOrientation.Y;
            axis.Maximum = maxVal;
            axis.Minimum = minVal;
            axis.Visibility = Visibility.Hidden;

            //and use it:
            LineSeries ls = lineChart.Series.First() as LineSeries;
            ls.DependentRangeAxis = axis;

            //lineChart.Visibility = Visibility.Hidden;
            ls.BorderBrush = Brushes.Transparent;


            lineChart.DataContext = data;

        }
    }
}

Answer 1

After lot of searching and experiment I found one simple solution. We need to change template of chart by simply adding following code in XAML file and one reference :

xmlns:chartingprimitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"


<chartingToolkit:Chart.Template>
                <ControlTemplate TargetType="chartingToolkit:Chart">
                    <Border 
                BorderBrush="Transparent"
                BorderThickness="0">
                        <Grid>
                            <chartingprimitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
                                <Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
                            </chartingprimitives:EdgePanel>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </chartingToolkit:Chart.Template>

Answer 2

This control does not provide a convenient way to do it. But there is always a way to do it anyway, even though this code will be more fragile.

First, you can explore structure of you control with Visual studio debugger. In VS 2019 there is Live Visual Tree: In previous versions you can find it in the debugger: There are also a lot of other similar tools from 3rd party. Once you find the control in the structure that needs to be changed (in this case it is a Border inside an EdgePanel). Then you can change this control from code behind. You cannot do it in the constructor, because visual tree is not loaded at construction time yet. You can do it on Loaded. So you need to subscribe to Loaded event on the chart control (and maybe to LayoutUpdate event, because on layout update it can restore its original value). Function FindVisualChild helps to find control by type and name in the visual tree. When we find the border, we can either make is transparent (safer option), either make its thickness 0, but it may affect the layout. Also we can remove it, but then something that depends on it may be broken. Note that if you change theme, this code may stop working as it may have different visual tree.

    void LineChart_OnLoaded(object sender, RoutedEventArgs e) {
        if (sender is Chart chart) {
            RemoveBorder(chart);
        }
    }

    void RemoveBorder(Chart chart) {
        EdgePanel ep = FindVisualChild<EdgePanel>(chart, "ChartArea");
        Border border = FindVisualChild<Border>(ep);
        border.BorderBrush = Brushes.Transparent;
    }

    static T FindVisualChild<T>(DependencyObject obj, string name = null) where T : FrameworkElement {
        int childrenCount = VisualTreeHelper.GetChildrenCount(obj);
        for (int i = 0; i < childrenCount; i++) {
            DependencyObject child = VisualTreeHelper.GetChild(obj, i);
            if (child is T element && (name == null || name == element.Name)) {
                return element;
            }
            T childOfChild = FindVisualChild<T>(child, name);
            if (childOfChild != null) {
                return childOfChild;
            }
        }
        return null;
    }