CODEWITHSUNDEEP
javascripthighcharts
ckapilla
ckapilla

Reputation: 1178

Highcharts has incorrect vertical bar position

I believe I have found a bug in Highcharts -- I can't see how it could be my code (but it wouldn't be the first time I was wrong about that! (jsfiddle link is below). This can be a serious issue, because the in some cases the incorrect position can be "off the chart" which could have serious repercussions in the health-care field!

Simplest case to display it: a 2 point spline and single vertical bar on a date-time x-axis. If a second vertical bar is added, but with empty data, the position of the original bar is incorrectly offset. (For simplicity, in my example I am using the same date-time for the vertical bar and the spline's end point, but this is not necessary to see the problem.) I have reproduced this in different versions of Highcharts, including the most recent 3.0.0.

In my jsfiddle example I have commented out the second vertical bar, and things display correctly; simply un-comment out that part to see the incorrect offset. If data for the second vertical bar is not empty, the first vertical bar again displays correctly.

http://jsfiddle.net/ckapilla/8vdkf/

// 3/20/2003
var startDt = Date.UTC(2013, 3 - 1, 20, 0, 0, 0);
var stopDt = Date.UTC(2013, 3 - 1, 20, 11, 59, 59);

var date1 = Date.UTC(2013, 3 - 1, 20, 8, 0, 0);
var date2 = Date.UTC(2013, 3 - 1, 20, 11, 0, 0);

var yMaxBG = 400;
var yMaxIns = 30;

var emptyData = [];
var barData = [{
    x: date2,
    y: 24
}];

var splineData = [{
    x: date1,
    y: 49
}, {
    x: date2,
    y: 141
}];


var glycemicChart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },

    xAxis: {
        type: 'datetime',
        min: startDt,
        max: stopDt,
        dateTimeLabelFormats: {
            day: '%e-%b-%Y'
        },

        tickInterval: 24 * 3600 * 1000,
        gridLineWidth: 2,
        gridLineColor: '#a0a0a0',

        minorTickInterval: 3600 * 1000,
        minorGridLineWidth: 1,
        minorGridLineColor: '#d0d0d0'
    },
    yAxis: [{

        min: 50,
        max: 400,
        minorGridLineWidth: 0

    }, {
        min: 0,
        max: 30,
        alignTicks: false,
        opposite: true
    }],

    plotOptions: {
        pointInterval: 3600000 // one hour
    },

    series: [{
        name: 'spline',
        yAxis: 0,
        data: splineData

    },

            {
                name: 'Bar',
                type: 'column',
                yAxis: 1,
                pointWidth: 10,
                data: barData
            }
    /* un-comment the following to see incorrect offset */

    /******,

    {
    name: 'dummy',
    type: 'column',
    yAxis: 1,
    pointWidth: 10,
    data: emptyData
    }
    ********/
    ]
});

Upvotes: 1

Views: 1239

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

First, make sure you are using latest version (3.0 in that case). Then in plotOptions.column you have option grouping. In general when using more columns they are a little translated, to make sure that won't overlap each other. Grouping option is designed to remove that behavior.

See example: http://jsfiddle.net/Fusher/8vdkf/2/

        plotOptions: {
            column: {
                grouping: false
            }
        },

Upvotes: 1

Related Questions