質問

I'm having a problem using columns in Highcharts (highstock).

I can set differents ranges to group data (minutes, hours, days...), Highcharts tries to adjust the column size for each group and I can set the size of each column and distance between columns based on how many columns are in the chart.

This works fine in almost every quantity of data... but is not working for 72 columns (3 days in hours), the columns looks too thin (less than 1 px).

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

var chart;
$(document).ready(function () {
    chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container'
        },
        xAxis: {
            ordinal: false,
            maxZoom: 2 * 3600000
        },
        series: [{
            data: s,
            type: 'column',
            dataGrouping: {
                units: [
                    ['minute', [1, 5, 10, 30]],
                    ['hour', [1,2]],
                    ['day', [1]],
                    ['week', [1]],
                    ['month', [1]]
                ],
                groupPixelWidth: 10,
                approximation: 'high'
            }
        }]
    });
});

If you move the mouse over the chart you could see the columns, if you zoom to 2 days columns looks fine but still being too thin, if you zoom to max (2 hours) the size is perfect, just as I expected.

How can I set the lines wider?

役に立ちましたか?

解決 2

Solved!

The problem occurs when i use too many time intervals, (seconds), then I wasn't showing 72 columns (3 days of 24 hours = 72) as I thought, because I have columns with seconds (like 14:21:57), then I was showing 3 days of 24 hours of 60 minutes of 60 seconds = 259200 columns.

To solve the issue I rounded every column to zero seconds and zero minutes (14:21:57 -> 14:00:00), and that's all :)

Solution: http://jsfiddle.net/3cbvV/4/

Math.floor(1398384001000/6000000)*6000000

他のヒント

Well, in general, you can set higher groupPixelInterval, to get wider columns.

And about bug with missing columns - it's already fixed on master branch, see: http://jsfiddle.net/3cbvV/3/

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top