CODEWITHSUNDEEP
highcharts
Chris Barr
Chris Barr

Reputation: 33972

Highcharts: Remove space between plot border and actual chart

We are migrating from a flash based charting library (FusionCharts) to a JavaScript based one (HighCharts).

This is what our current flash charts look like Current flash charts

And this is what I've got so far with HighCharts. enter image description here

How can I remove the space (marked with big dumb red arrows) between the plot border and the actual chart data?

Here's my code: http://jsfiddle.net/ChrisMBarr/7JAcN/1/

var chart = new Highcharts.Chart({
        chart:{
            renderTo: 'container',
            type: 'areaspline',
            plotBorderWidth: 1,
            spacingTop:2,
            spacingRight:5,
            spacingBottom:5,
            spacingLeft:2,
            borderWidth:1,
            borderRadius:0,
            borderColor:'#999'
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Total spam in the last 7 days'
        },
        legend: {
            verticalAlign: 'bottom',
            borderWidth: 1,
            backgroundColor: '#FFFFFF'
        },
        xAxis: {
            allowDecimals:false,
            categories: [
                'Thu 2/14',
                'Fri 2/15',
                'Sat 2/16',
                'Sun 2/17',
                'Mon 2/18',
                'Tue 2/19',
                'Wed 2/20'
            ],
            labels: {
                staggerLines: 2
            },
            tickmarkPlacement: 'on',
        },
        yAxis: {
            allowDecimals:false,
            alternateGridColor: '#F7F7F7',
            title: {
                text: 'Number of Emails',
                margin:5
            }
        },
        tooltip: {
            formatter: function() {
                var isSpam = this.series.name === _chartOptions.series[1].name
                return ''+this.x +': <strong>'+ this.y +(isSpam ? " Spam" : "") +' Emails</strong>';
            }
        },

        plotOptions: {
            areaspline: {
                fillOpacity: 0.5
            }
        },

        series:  [{
                "name": "Total Mail",
                "color":"#339999",
                "data": [2,3,4,7,8,8,8]
            },{
                "name": "Spam",
                "color":"#003399",
                "data": [2,2,4,4,4,6,8]
        }]
    });

Upvotes: 13

Views: 10179

Answers (4)

SerNeo
SerNeo

Reputation: 135

The best way to remove paddings is to add pointPlacement: 'on' 

plotOptions: {
    areaspline: {           
        pointPlacement: 'on'
    }       
}

Upvotes: 2

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You should use minPadding/maxPadding parameters but it doens't work with categories. So I suggest to remove categoreis, use min value and tickInterval

http://jsfiddle.net/7JAcN/3/ http://api.highcharts.com/highcharts#xAxis.minPadding

xAxis: {
        allowDecimals:false,
        minPadding:0,
        maxPadding:0,
        /*categories: [
            'Thu 2/14',
            'Fri 2/15',
            'Sat 2/16',
            'Sun 2/17',
            'Mon 2/18',
            'Tue 2/19',
            'Wed 2/20'
        ],*/
        labels: {
            staggerLines: 2
        },
        tickmarkPlacement: 'on',
    },

Upvotes: 8

marty
marty

Reputation: 4015

With option "tickmarkplacement" set to "on", the xAxis "startontick" option might help you:

xAxis: {
    startOnTick: false,
    tickmarkplacement:"on",
    ...

see this jsfiddle, forked from the Highcharts API documentation

Upvotes: 0

JBar
JBar

Reputation: 373

This might help:

xAxis: {
    min: 0.5, max: 5.5
...

where max = number of data point minus 1.5

Upvotes: 15

Related Questions