How To Reduce Column Series Gap In DotNet.Highcharts

Question

I am creating my chart using DotNet.Highchart Library, i have a problem in reducing gap between data series in column chart. This is my current Chart :

and this is my current column chart code:

DotNet.Highcharts.Highcharts AttritionByReasonBarChart = new DotNet.Highcharts.Highcharts("AttritionByReasonBarChart")
                .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column, Height = 400, Width = 860, Style = "margin: '0 auto'" })
                .SetTitle(new Title { Text = "Attrition by Reason", Style = "font: 'normal 16px Verdana, sans-serif'" })
                .SetCredits(new Credits { Enabled = false })
                .SetXAxis(new XAxis
                {
                    Categories = vEmployment,
                    Labels = new XAxisLabels { Rotation = 0 }
                })
                .SetYAxis(new YAxis
                {
                    Title = new YAxisTitle
                    {
                        Text = "Employment Type",
                        Align = AxisTitleAligns.Middle
                    }
                })
                .SetPlotOptions(new PlotOptions
                {
                    Bar = new PlotOptionsBar
                    {
                        DataLabels = new PlotOptionsBarDataLabels { Enabled = true }
                    }
                })
                .SetLegend(new Legend
                {
                    Layout = Layouts.Vertical,
                    Align = HorizontalAligns.Right,
                    VerticalAlign = VerticalAligns.Middle,
                    Floating = true,
                    BorderWidth = 1,
                    BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFFFFF")),
                    Shadow = true
                })
                .SetSeries(
                    new Series
                    { 
                        Name = "Head Count",
                        Data = new Data(vTotal)
                    });

Is there any best way to set the gap between data series? Thanks

Answer 1

Replace PlotOptionsBar with PlotOptionsColumn and add PointPadding to your code as below:

Highcharts AttritionByReasonBarChart = new Highcharts("AttritionByReasonBarChart")
            .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column, Height = 400, Width = 860, Style = "margin: '0 auto'" })
            .SetTitle(new Title { Text = "Attrition by Reason", Style = "font: 'normal 16px Verdana, sans-serif'" })
            .SetCredits(new Credits { Enabled = false })
            .SetXAxis(new XAxis
            {
                Categories = new[] { "ABHFGFGETTRRD AGAGGSGSGS", "IEKHLTOTUYYT IIWWIIWEUEUEU", "KMVMVBBV DGDFEFJ", "KRJG JGJGJGT", "HAHAHSHSGD OTERETETE ET", "HAHAHA PRGDGDGDGDG DGT", "NRIRITITITITI WP", "DFC AHAHSSGGDF" },
                Labels = new XAxisLabels { Rotation = 0 }
            })
            .SetYAxis(new YAxis
            {
                Title = new YAxisTitle
                {
                    Text = "Employment Type",
                    Align = AxisTitleAligns.Middle
                }
            })
            .SetPlotOptions(new PlotOptions
            {
                Column = new PlotOptionsColumn
                {
                    PointPadding = -0.2,
                    DataLabels = new PlotOptionsColumnDataLabels { Enabled = false }
                }
            })
            .SetLegend(new Legend
            {
                Layout = Layouts.Vertical,
                Align = HorizontalAligns.Right,
                VerticalAlign = VerticalAligns.Middle,
                Floating = true,
                BorderWidth = 1,
                BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFFFFF")),
                Shadow = true
            })
            .SetSeries(
                new Series
                {
                    Name = "Head Count",
                    Data = new Data(new object[] { 30,10,5,20,5,10,25,15 })
                });