CODEWITHSUNDEEP
javascripthighcharts
clay_to_n
clay_to_n

Reputation: 583

Highcharts columns have no width (seemingly arbitrarily)

I'm working with a column chart using Highcharts. The chart needs to handle an arbitrary number of columns.

Here's an example of one such chart that I need to handle:

$('#TimesChart2').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Response Times'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            }
        },
        yAxis: {
            title: {
                text: 'Minutes'
            }
        },
        series: [{
            name: 'Average Response Time',
            data: [[Date.UTC(2013, 6, 30), 878.42], [Date.UTC(2013, 6, 31), 579.68], [Date.UTC(2013, 7, 1), 400.42], [Date.UTC(2013, 7, 2), 622.95], [Date.UTC(2013, 7, 5), 1260.97], [Date.UTC(2013, 7, 3), 0], [Date.UTC(2013, 7, 4), 0], [Date.UTC(2013, 7, 6), 517.945] ],
            dataGrouping: {
                enabled: false
            },
            pointPadding: .05
         }],
    });

The problem is that the columns have an extremely small width on this set of data. In some datasets (see the first graph in the jsfiddle link), the columns have normal width and are fine.

One possible workaround is to set the pointWidth to a fixed value, but then on large graphs the columns overlap. I've tried experimenting with pointPadding and grouping as well, to no avail.

http://jsfiddle.net/3NZZW/

Anyone know what's happening here?

Upvotes: 0

Views: 95

Answers (1)

Barbara Laird
Barbara Laird

Reputation: 12717

That's really odd. But, you're first data series is in reverse date order. If you fix that, the chart is right.

http://jsfiddle.net/pUTQd/

        series: [{
            name: 'Average Response Time',
            data: [[Date.UTC(2013, 7, 2), 354.5], [Date.UTC(2013, 7, 3), 1981.875], [Date.UTC(2013, 7, 4), 434.5], [Date.UTC(2013, 7, 5), 678.1], [Date.UTC(2013, 7, 6), 87.465] ],
            dataGrouping: {
                enabled: false
            },
            pointPadding: .05
         }],

(note I just changed the dates, I didn't change the data)

Upvotes: 1

Related Questions