CODEWITHSUNDEEP
javascriptjqueryhighcharts
Jan Ove
Jan Ove

Reputation: 43

Highstock navigator step like the parent chart

I am using Highstock to visualize some data for my web application.

The data is displayed as steps (that is one value is held until a new one takes over), however the navigator of Highstock seems to use the spline algorithm on the data. I would rather like it to display as "blocks" like the main chart.

I have tried adding step: "true" to navigator.series in the options, but it does not seem to matter.

Does anyone know a way to do this with the Highstock API? I have been digging into the documentation for a while without any luck.

Code used to initialize highstock chart:

$('#container').highcharts('StockChart', {


    rangeSelector: {
        inputEnabled: true,
        selected: 0,
        buttons: [{
            type: 'day',
            count: 1,
            text: 'Day'
        }, {
            type: 'week',
            count: 1,
            text: 'Week'
        }]

    },

    series: [{
        name: 'Light level',
        data: data,
        type: 'area',
        step: true,
        threshold: null,
        tooltip: {
            valueDecimals: 2
        },
        fillColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
                [0, "#fff800"],
                [1, Highcharts.Color("#fff800").setOpacity(0).get('rgba')]
            ]
        }
    }],

    yAxis: {
        labels: {
            formatter: function () {
                if (this.value > 0) return "" + this.value + "%";
                return "";
            }
        },
        plotLines: [{
            value: 0,
            color: 'green',
            dashStyle: 'shortdash',
            width: 2,
            label: {
                text: '0%',
                align: "right"
            }
        }, {
            value: 100,
            color: 'red',
            dashStyle: 'shortdash',
            width: 2,
            label: {
                text: '100%',
                align: "right"
            }
        }],
        tickPositions: [0, 25, 50, 75, 100]
    },
    credits: {
        enabled: false
    },
    navigator: {
        //enabled: false
    }
});

I have also created a jsfiddle with example data. http://jsfiddle.net/EJZ5x/

Upvotes: 1

Views: 739

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

According to docs - step option isn't supported.

However, when you set directly type for navigator, it works! See: http://jsfiddle.net/EJZ5x/1/

    navigator: {
        series: {
            type: 'area',
            step: 'left' 
        }
    }

Upvotes: 4

Related Questions