CODEWITHSUNDEEP
javascripthighcharts
James
James

Reputation: 16339

Empty space above plot lines in Highcharts

I am using Highcharts (Highstock) to render a chart on my page.

I am specifying a max and min value for my axis, but despite this I end up with blank space above my graph:

graph with blank space

This is what my options look like currently:

var myChart = new Highcharts.Chart('container', {
    rangeSelector:{
        enabled: false
    },
    credits: {
        enabled: false
    },
    legend: {
        enabled: true,
    },
    yAxis: [{
        opposite: false,
        title: {
            text: 'Gravity'
        },
        min: 1,
        max: items.options.gravity_max + 0.01
    },
    {
        opposite: true,
        title: {
            text: 'Temperature (C)'
        },
        min: items.options.temperature_min - 1,
        max: items.options.temperature_max + 1
    }],
    navigator: {
        enabled: false,
    },
    scrollbar: {
        enabled: false
    },
    series: [{
        name: 'Temperature',
        data: items.temperature,
        dataGrouping: {
            enabled: true
        },
        yAxis: 1,
    }, {
        name: 'Gravity',
        data: items.specific_gravity,
        dataGrouping: {
            enabled: true
        }
    },
    {
        name: 'OG',
        data: items.original_gravity,
        dataGrouping: {
            enabled: true
        },
        dashStyle: 'dot',
        color: '#000'
    },
    {
        name: 'FG',
        data: items.final_gravity,
        dataGrouping: {
            enabled: true
        },
        dashStyle: 'dot',
        color: '#000'
    }]
});

Here is a link to a fiddle with a simplified version of the data; http://jsfiddle.net/3eLrn61w/

What is causing that blank space above, and how do I get rid of it?

Upvotes: 1

Views: 472

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

This is because Highcharts by default will try to start and end an axis on a label. Your current max is 1.071+0.01 (1.081). This is more than the label checkpoint of 1.075, which causes another label to be made.

You can fix this by doing (JSFiddle example):

yAxis: [{
    // ...
    endOnTick: false
}]

A few other options you might want to evaluate is the matching axis.startOnTick: false, possibly axis.maxPadding: 0 to avoid creating labels that are marginally needed and chart.alignTicks: false to free up the connection between the axis.

An alternative approach will also be to alter the tick positions (axis.tickPositions or axis.tickPositioner) so that they line up better with your min and max values.

Or your third option is to alter your handcoded maximum of the axis (max: items.options.gravity_max + 0.01), so that it does not create such a label gap, f.x. by being max: 1.074.

However, I think your best bet may be with the startOnTick and endOnTick options.

Upvotes: 2

Related Questions