删除条形图之间的列间距

Question

你好，有人可以帮我如何删除 highchart 中堆栈条之间的间距。

条之间有更多空白

下面是我用来渲染图表的代码。 所以在 x 轴上我尝试添加样式，但仍然没有按预期工作

$('#tempstack').highcharts({
                            chart: {
                                type: 'bar',
                                backgroundColor: 'transparent'
                            },
                            title: {
                                text: 'Forms wise progress'
                            },                                
                            xAxis: {
                                categories: stkTemplateName,
                                startOnTick: false,
                                labels: {
                                    rotation: 0,
                                    useHTML: true,
                                    x: 0,
                                    y: 30,
                                    style: {
                                        color: '#000',
                                        font: '12px roboto',
                                        top: '0px',
                                        right: '10px',
                                        'margin-bottom': '0px',
                                        paddingLeft: '0px',
                                        paddingRight: '0px',
                                        paddingTop: '0px',
                                        paddingBottom: '0px',

                                    },

                                    step: 1
                                },
                                lineWidth: 0,
                                minorGridLineWidth: 0,
                                gridLineWidth: 0,
                                lineColor: 'transparent',
                                minorTickLength: 0,
                                tickLength: 0,
                                pointWidth: 0.1

                            },
                            yAxis: {
                                gridLineWidth: 0,
                                min: 0,
                                title: {
                                    text: ''
                                },
                                gridLineColor: '#ffffff',
                                labels: {
                                    enabled: false

                                },
                                minorGridLineWidth: 0


                            },

                            plotOptions: {
                                bar: {
                                    pointPadding: 0,
                                    borderWidth: 0,

                                },

                                series: {
                                    stacking: 'normal',
                                    pointWidth: 20,
                                    dataLabels: {
                                        enabled: true,
                                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                                    }
                                }

                            },
                            series: [{
                                name: 'Yet-toStart',
                                data: stkYetToStart
                            }, {
                                name: 'Completed',
                                data: stkCompleted
                            }, {
                                name: 'Inprogress',
                                data: stkInProgress
                            },
                             {
                                 name: 'Ongoing',
                                 data: stkOnGoing
                             }],

                        });

Answer 1

您可以通过减小 groupPadding 属性来减小条之间的间距 - 此外，您可以设置点宽度，如果您将其固定，您将无法更改间距。

plotOptions: {
  bar: {
    pointPadding: 0,
    borderWidth: 0,
    groupPadding: 0.01
},

示例：https://jsfiddle.net/2c74x5jv/1/