CODEWITHSUNDEEP
highcharts
Alex Coroza
Alex Coroza

Reputation: 1757

Highcharts - Column chart with legend for each data

I want each data in a column to chart to have its own legends to make it show/hide whenever the user wants so I used the solution here

It works fine but theres a slight problem. Columns were compressed to the middle section of the chart(I want the columns to be plotted evenly accros the chart)enter image description here

Heres the code

    var options = {
        exporting: {
            enabled: false
        },
        legend: {
            enabled: true
        },
        chart: {
            renderTo: 'sampleChart',
            type: 'column',
        },
        title: {
            text: 'NCR'
        },
        subtitle: {
            text: '',
            useHTML: true
        },
        xAxis: {
            categories: [],
            title: {
                text: null
            },
            labels: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                align: 'low',
                text:null
            },
            labels: {
                enabled: true,
                overflow: 'justify'
            },
            min: 0
        },
        plotOptions: {
            series: {
                marker: {
                    lineWidth: 0
                }
            },
            column: {
                color: '#03A9F4',
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.2f}'
                }
            }
        },
        tooltip:{
            enabled:true,
            shared: false
        },
        credits: {
            enabled: false
        },
        series: [
            { name: 'Week1 ', data: [55.22] },
            { name: 'Week2 ', data: [76.06] },
            { name: 'Week3 ', data: [88] },
            { name: 'Week4 ', data: [23.6] },
            { name: 'Week5 ', data: [23.99] },
            { name: 'Week6 ', data: [42.98] },
            { name: 'Week7 ', data: [91.32] },
            { name: 'Week8 ', data: [64.21] },
            { name: 'Week9 ', data: [43.32] },
            { name: 'Week10 ', data: [79.89] }
        ]
    }; //close options


    var chart = new Highcharts.Chart(options);

Upvotes: 0

Views: 2915

Answers (1)

Martin Schneider
Martin Schneider

Reputation: 3268

The option groupPadding (plotOptions > column > groupPadding) is responsible for this margin. Default is 0.2, set it lower to decrease the margin.

Doku: http://api.highcharts.com/highcharts#plotOptions.column.groupPadding

Upvotes: 1

Related Questions