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;
}

Answer 2

have you look into this ? seem default is 0 mean bar take all the space

Scale.SpacingSlotCount Property Determines the number of space slots that will be left around the DataPoints per category slot, measured relatively to the DataPoint slot's width: Empty Space = SpacingSlotCount * DataPoint_SlotWidth Namespace: Telerik.Reporting Assembly: Telerik.Reporting (in Telerik.Reporting.dll) Version: 12.1.18.816 (12.1.18.816)