YeahMKD
YeahMKD

Reputation: 425

minimum in Highcharts not working

So Im using this code to create a highcharts line chart

http://jsfiddle.net/3oLh5r2w/

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'x'
        },
        title: {
            text: 'USD to EUR exchange rate from 2006 through 2008'
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' :
                    'Pinch the chart to zoom in'
        },
        xAxis: {
            type: 'datetime',
            minRange: 14 * 24 * 3600000 // fourteen days
        },
        yAxis: {
            title: {
                text: 'Exchange rate'
            },
            floor:1,
            min: 1,
            max: 300,
            reversed: true,
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },
                marker: {
                    radius: 2
                },
                lineWidth: 1,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },

        series: [{
            type: 'line',
            name: 'USD to EUR',
            pointInterval: 24 * 3600 * 1000,
            pointStart: Date.UTC(2006, 0, 1),
            data: [
                83, 28, 253, 113, 72, 177, 279, 71, 228, 72, 54, 162, 275, 246, 111, 119, 225, 19, 244, 102, 1, 75
            ]
        }]
    });
});

In the Fiddle, Im trying to make it so that the yaxis always shows 1 - 300. The problem I am having is that it is always rounding down to 0. I have tried using startOnTick, but it didnt do anything. The only thing that I could find that made it work correctly was setExtremes, but it could only be activated through an after load function like a click function.

How can I get this to work right?

Upvotes: 1

Views: 339

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

In case when you set min as 1, you need to have tickInterval which allows to achieve 300. Other solution is using tickPositions / tickPositioner

EDIT: Examples: http://jsfiddle.net/3oLh5r2w/4/ tickPositions

Upvotes: 1

Karthik Ganesan
Karthik Ganesan

Reputation: 4222

set startOnTick : false,

here is the updated fiddle

http://jsfiddle.net/3oLh5r2w/2/

here is the documentation

The minimum value of the axis. If null the min value is automatically calculated. If the startOnTick option is true, the min value might be rounded down.

Upvotes: 1

Related Questions