Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts: Remove space between plot border and actual chart

Tags:

highcharts

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]
        }]
    });
like image 417
FiniteLooper Avatar asked Feb 20 '13 22:02

FiniteLooper


Video Answer


1 Answers

This might help:

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

where max = number of data point minus 1.5

like image 119
JBar Avatar answered Oct 12 '22 12:10

JBar