Блог

Привет, может кто-нибудь помочь, как я могу удалить интервал между столбцами стека в верхней диаграмме.

Больше пробелов между столбцами

ниже приведен код, который я использую для рендеринга диаграммы. итак, по оси 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 amp;amp; Highcharts.theme.dataLabelsColor) || 'white'
                                    }
                                }

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

                        });
  

Вы можете уменьшить расстояние между столбцами, уменьшив свойство groupPadding — кроме того, вы устанавливаете ширину точки, если она у вас фиксирована, вы не сможете изменить пространство.

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

Пример: https://jsfiddle.net/2c74x5jv/1 /