2

I need to reduce the space in between the red columns. Please refer to this code

$(function () {
$('#container').highcharts({

    colors: ['#ba0000'],
    chart: {
        type: 'column',
        spacingBottom: 10,
        spacingTop: 30,
        spacingLeft: 0,
        spacingRight: 10,

        style: {
            fontFamily: 'MuseoSans-500',
            fontSize: '14px'                
        }       

    },

    title: {
        text: ''
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: [
            'YTD',
            'QTD',
            'Last Period'
        ],
        labels: {
            style: {
                fontSize:'14px'
            }
        }           
    },
    yAxis: {
        min: 0,
        title: {
            text: '%'
        },

        plotLines: [{
            color: '#0054a6',
            width: 2,
            value: 48,
            dashStyle: 'Dash',
        label : {
                    text : 'AVG'
                }               
        },



        {
            color: '#00ed99',
            width: 2,
            value: 65,
            dashStyle: 'Dash',
            label : {
                    text : 'GOAL',

             }  


            }]

    },



    credits: {
         enabled: false
    },
    tooltip: {
        headerFormat: '<span style="font-size:1.1em">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0"></td>' +
            '<td style="padding:0"><b>{point.y:.1f}%</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {

            pointPadding: 0,
            borderWidth: 0,
            groupPadding: 0,
            pointWidth: 50,
        }
    },
    series: [{
        data: [57, 63, 62],


    }]
});

});

I have tried solutions from Highcharts - How can I decrease space between categories? and Space between columns but it didn't quite work. I'm not too sure what I am missing out.

Thanks.

1 Answer 1

7

You need the property groupPadding

        plotOptions: {
            series: {
                pointPadding: 0,
                groupPadding: 0,
            }
        },

This will completely remove the spacing between them.

See the DEMO here

4
  • Thanks, but that will overlap the two dashed plot lines which are in green and blue. Is there any way to reduce the space but not overlap those lines.
    – square
    Oct 2, 2014 at 3:01
  • @square lines are poisitoned according to value which you defined. So if you need them higher, set different value. Oct 10, 2014 at 11:17
  • This was exactly what I was looking for, I had a column stockChart with very thin columns that were almost impossible to mouse over, this was perfect!
    – Eko3alpha
    Nov 29, 2016 at 17:35
  • @square Please refer bellow link , in this distance between column and group column is nicely calculated , by this no column will overlap to each other or will not create major gap between column github.com/highcharts/highcharts-react/issues/77 Feb 18, 2020 at 7:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.