How to make yAxis start from a specific time with bar series in highchart?

Question

I want to have bar chart start from a specific time (1.Apr)

So I implemented this in below sample:

(jsFiddle) sample with axis right but can the bar disappear

With the code below

    yAxis: {
        type: 'datetime',
        min:Date.UTC(2010, 3, 1)
    },

yAxis actually start from 1.Apr, but I can not see the bar itself .

If I remark the min line as below

    yAxis: {
        type: 'datetime'
        //min:Date.UTC(2010, 3, 1)
    },

Now I can see the bar appear, but the yAxis default show from 1.Jan.

Can anyone help me make the bar visible and yAxis starting from 1.Apr ?

Flagging for: "Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**." — BSMP, Jun 30 '15 at 22:35
Why is this on the y-axis? Where do you get "pointStart" from? And your points don't actually have datetime x-values. — Halvor Holsten Strand, Jun 30 '15 at 23:03
In case when you use pointStart, you should not use x param in point object. — Sebastian Bochan, Jul 02 '15 at 09:42

score 1 · Answer 1 · answered Jul 01 '15 at 08:33

1

I think I found what you're searching.

There's an option in yAxis called min, it's used to set the lowest value of your axis. Like that :

yAxis: {
    type: 'datetime',                      
    min: Date.UTC(2010, 3, 1)
}

Hope it's what you're searching. Chears from a bear.

answered Jul 01 '15 at 08:33

Toodoo

223
1
7

Thanks for your help, maybe I should make my problem more clear. So I make a sample here, http://jsfiddle.net/bbkingtw/v9582phy/2/ From my sample, you will see the yAxis show from 1.Jan, but what I want is it show from Arp. 1. If I add the min:Date.UTC(2010,3,1) in http://jsfiddle.net/bbkingtw/v9582phy/3/ , the bar disappered... this confuse me – Bruce Chen Jul 03 '15 at 11:23

score 0 · Answer 2 · answered Jul 06 '15 at 07:19

Let me explain how datetime axis works. In general, datetime axis is based on number of milliseconds since 1970-01-01 00:00:00. That means, setting y: 3600 * 1000 will render column from 1970-01-01 00:00:00 to 1970-01-01 01:00:00. You want to start chart as 1st of April, but your data doesn't reflect that. In other words, you need provide such info, for example:

    series: [{
        name: 'UP',
        color: 'lime',
        data: [{
            x: 1,
            y: Date.UTC(2015, 5, 1, 1, 0, 0) // 2015-06-01 01:00:00
            // or:
            // y: 1433120400000 
            // is the same as above use for Date.UTC()
        }]
    }]

Live demo: http://jsfiddle.net/v9582phy/4/

score 0 · Answer 3 · answered Jul 06 '15 at 15:40

Thanks for your replying, it helps. And I had extended the code yours with further enhancement as below

yAxis: {
        type: 'datetime',            
        labels: {
            formatter: function () {
                 var x=new Date(Date.UTC(2015, 3, 1)+this.value*1000*60)                     
                 return moment(x).format('MMM/DD HH:mm:ss')
            }
        }
    },

with series data as

   series: [{            
        data: [{
            status:'studying',
            color: 'lime',
            x: 1,
            y: 5
        }, {
            status:'playing guitar',
            color: 'yellow',
            x: 2,
            y: 10
        }, {
            status:'exam',
            color: 'red',
            x: 2,
            y: 23
        }]
    }]

And I got stacked bar which each bar present how many minutes for lasting status

Live demo: http://jsfiddle.net/v9582phy/11/

How to make yAxis start from a specific time with bar series in highchart?

3 Answers3