WPF Bar Chart how to add space between bars?

Question

I am using Telerik (RadPieChart) with WPF. What I want to do is add a small space between the bars. I am not asking about the space between the series, as that is already available, but about a smaller space between the bars just as shown in the image examples below.

Here is what I have now:

And this is how I would like my Bar Chart to look like with a small space between them:

This is my source code:

private BarSeries CreateBarSeries(KeyValuePair<ChartSerie, List<ChartDataPoint>> chartSeries, ChartLegendSettings legendSettings, int colorPaletteIndex)
    {
        var isStackMode = chartSeries.Key.CombineMode == SeriesCombineMode.Stack;
        var barSerie = new BarSeries()
        {
            VerticalAxis   = CreateMultipleVerticalAxis(chartSeries, colorPaletteIndex, out var multipleVerticalAxis) ? multipleVerticalAxis : null,
            LegendSettings = legendSettings,
            StackGroupKey  = chartSeries.Key.Group,
            Opacity        = 0.8,
            ZIndex         = 120,

            CombineMode = string.IsNullOrEmpty(chartSeries.Key.Group)
                              ? ChartSeriesCombineMode.Cluster
                              : (isStackMode ? ChartSeriesCombineMode.Stack : ChartSeriesCombineMode.Stack100),
            // start animations
            //PointAnimation = new ChartMoveAnimation()
            //{
            //    MoveAnimationType = MoveAnimationType.Bottom,
            //    Duration          = new TimeSpan(0, 0, 0, 0, 600),
            //    Delay             = new TimeSpan(0, 0, 0, 0, 155),
            //    //Easing = new ElasticEase()
            //    //{
            //    //    EasingMode = EasingMode.EaseOut,
            //    //},
            //},
            LabelDefinitions =
            {
                // set the clarion format for the labels
                new ChartSeriesLabelDefinition()
                {
                    Template = new DataTemplate()
                    {
                        VisualTree = GetSeriesFormat(chartSeries),
                    }
                }
            }
        };

        // this is the color of bar series
        if (chartSeries.Key.ColorHex != null)
        {
            Style style = new Style(typeof(Border));
            style.Setters.Add(new Setter(Border.BackgroundProperty, (SolidColorBrush)(new BrushConverter().ConvertFrom(chartSeries.Key.ColorHex))));
            barSerie.DefaultVisualStyle = style;
        }

        foreach (ChartDataPoint serie in chartSeries.Value)
        {
            barSerie.DataPoints.Add(new CategoricalDataPoint()
            {
                Category = serie.XPoint.Label,
                Value    = (double?)serie.Value,
            });
        }

        return barSerie;
    }

---

The answer:

For some reason adding the BorderThickness to the Style as suggested in one of the answers did not do the trick, although BorderThicknes should be the solution. So I added a PointTemplate with a VisualTree and there I defined the BorderThickness. Now it is working perfectly.

 private BarSeries CreateBarSeries(KeyValuePair<ChartSerie, List<ChartDataPoint>> chartSeries, ChartLegendSettings legendSettings, int colorPaletteIndex)
    {
        var seriesPredefinedColor = this.ChartBase.Palette.GlobalEntries[colorPaletteIndex].Fill;

        FrameworkElementFactory borderFramework = new FrameworkElementFactory(typeof(Border));
        borderFramework.SetValue(Border.BackgroundProperty, ColorService.BrushFromHex(chartSeries.Key.ColorHex) ?? seriesPredefinedColor);
        borderFramework.SetValue(Border.OpacityProperty, 0.8D);
        borderFramework.SetValue(Border.BorderThicknessProperty, new Thickness(2));
        borderFramework.AddHandler(Border.MouseEnterEvent, new MouseEventHandler((sender, args) =>
                                                                                 {
                                                                                     var seriesBorder = (Border)sender;
                                                                                     //seriesBorder.BorderBrush = new SolidColorBrush(Colors.Black);
                                                                                     //seriesBorder.BorderThickness = new Thickness(1);
                                                                                     seriesBorder.Opacity = 1;
                                                                                 }));

        borderFramework.AddHandler(Border.MouseLeaveEvent, new MouseEventHandler((sender, args) =>
                                                                                 {
                                                                                     var seriesBorder = (Border)sender;
                                                                                     //seriesBorder.BorderBrush = new SolidColorBrush(Colors.Black);
                                                                                     //seriesBorder.BorderThickness= new Thickness(1);
                                                                                     seriesBorder.Opacity = 0.8;
                                                                                 }));

        var isStackMode = chartSeries.Key.CombineMode == SeriesCombineMode.Stack;
        var barSerie = new BarSeries()
        {
            VerticalAxis   = CreateMultipleVerticalAxis(chartSeries, colorPaletteIndex, out var multipleVerticalAxis) ? multipleVerticalAxis : null,
            LegendSettings = legendSettings,
            StackGroupKey  = chartSeries.Key.Group,
            ZIndex         = 120,
            IsHitTestVisible = true,
            CombineMode = string.IsNullOrEmpty(chartSeries.Key.Group)
                              ? ChartSeriesCombineMode.Cluster
                              : (isStackMode ? ChartSeriesCombineMode.Stack : ChartSeriesCombineMode.Stack100),
            // start animations
            //PointAnimation = new ChartMoveAnimation()
            //{
            //    MoveAnimationType = MoveAnimationType.Bottom,
            //    Duration          = new TimeSpan(0, 0, 0, 0, 600),
            //    Delay             = new TimeSpan(0, 0, 0, 0, 155),
            //    //Easing = new ElasticEase()
            //    //{
            //    //    EasingMode = EasingMode.EaseOut,
            //    //},
            //},
            LabelDefinitions =
            {
                // set the clarion format for the labels
                new ChartSeriesLabelDefinition()
                {
                    Template = new DataTemplate()
                    {
                        VisualTree = GetSeriesFormat(chartSeries),
                    }
                }
            },
            PointTemplate = new DataTemplate()
            {
                VisualTree = borderFramework,
            }
        };

        // this is the color of bar series
        //if (chartSeries.Key.ColorHex != null)
        //{
        //    Style style = new Style(typeof(Border));
        //    style.Setters.Add(new Setter(Border.BackgroundProperty, (SolidColorBrush)(new BrushConverter().ConvertFrom(chartSeries.Key.ColorHex))));
        //    barSerie.DefaultVisualStyle = style;
        //}

        foreach (ChartDataPoint serie in chartSeries.Value)
        {
            barSerie.DataPoints.Add(new CategoricalDataPoint()
            {
                Category = serie.XPoint.Label,
                Value    = (double?)serie.Value,
            });
        }

        return barSerie;
    }

Answer 1

Set the BorderThickness property of the DefaultVisualStyle of the BarSeries:

// this is the color of bar series
if (chartSeries.Key.ColorHex != null)
{
    Style style = new Style(typeof(Border));
    style.Setters.Add(new Setter(Border.BackgroundProperty, (SolidColorBrush)(new BrushConverter().ConvertFrom(chartSeries.Key.ColorHex))));
    style.Setters.Add(new Setter(Border.BorderThicknessProperty, new Thickness(2.0)));
    barSerie.DefaultVisualStyle = style;
}