CODEWITHSUNDEEP
highcharts
Ron
Ron

Reputation: 13

highcharts columns too wide with certain data

I created a simple column chart with a datetime xAxis and no other options. If I add simple data [342, 351, ...], it draws as expected, with columns that size to fit the space. However, when I use [x,y] data pairs, [[1481863920000,326],[1481863915000,330],...], the columns become overly wide and overlap each other.

jsFiddle showing issue http://jsfiddle.net/7hoes1p9/

    Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Column chart with fat columns'
    },
    xAxis: {
        type: 'datetime'
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'John',
        data: [[1481863920000,326],[1481863915000,330],[1481863910000,418],[1481863905000,384],[1481863900000,329],[1481863895000,342],[1481863890000,550],[1481863885000,639],[1481863880000,488],[1481863875000,375],[1481863870000,532],[1481863865000,397],[1481863860000,362],[1481863855000,312],[1481863850000,373],[1481863845000,373],[1481863840000,344],[1481863835000,356],[1481863830000,545],[1481863825000,646],[1481863820000,454],[1481863815000,328],[1481863810000,553],[1481863805000,407]]
    }]
});

Do I need to override some default behavior to get proper columns? Is there a minimum column width I need to unset? Does the data need to be added differently? Any help would be appreciated.

Upvotes: 0

Views: 952

Answers (3)

morganfree
morganfree

Reputation: 12472

When you use a datetime axis with series like columns and bars, you should specify pointRange property. It defines what range of time is valid for a single column.

 series: [{
        pointRange: 1000,

example: http://jsfiddle.net/7hoes1p9/5/

Upvotes: 2

progrAmmar
progrAmmar

Reputation: 2670

Check the following in chart options:

plotOptions: {
            series: {
                pointWidth: 5
            }
        }

Upvotes: 0

Pritish Vaidya
Pritish Vaidya

Reputation: 22199

You need to add the .pointwidth to get the optimum width of the columns as demonstrated here in this fiddle

 column: {
                pointWidth: 1,
            }

or for other options refer to this thread here

Upvotes: 0

Related Questions