Klodoma Klodoma - 5 months ago 34
Javascript Question

Highcharts Series Margins

Looking since a while to this issue, but I can't find a correct answer.

See attached picture. How can I control/increase the margins of the chart drawing ONLY? Axis and the rest should stay as they are, I would like to make the margin between the Y Axis and the Chart Itself bigger.

Is this somehow possible?

Fiddle code: http://jsfiddle.net/klodoma/ood4vykf/1/

$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Weather Data for Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true

}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}

}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Rainfall',
//type: 'spline',
yAxis: 0,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 18.5, 26.4, 14.1, 195.6, 154.4],
tooltip: {
valueSuffix: ' mm'
}

},
{
name: 'Rainfall2',
type: 'spline',
yAxis: 1,
data: [19.9, 73.5, 100.4, 111.2, 134.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}

}]
});


enter image description here

Answer

I have found a solution: The offset property of the xAxis and yAxis from the Highcharts API can be used.

The "trick" is to specify the offset just to the first axis and not to all of them.

    yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}°C',
        },
        title: {
            text: 'Temperature',
        },
        offset: 150
    },{ // Primary yAxis
        labels: {
            format: '{value}°C',
        },
        title: {
            text: 'Temperature',
        },
        //offset: 50 //do not set this value
    }, { // Secondary yAxis
        gridLineWidth: 0,
        title: {
            text: 'Rainfall',
        },
        labels: {
            format: '{value} mm',
        },
        opposite: true,
        offset: 50 //set this value, it's an opposite axis!
    }],

A full example is here: http://jsfiddle.net/klodoma/2k4akses/3/

enter image description here

Comments