CODEWITHSUNDEEP
javascriptchart.js
Павел Клешнин
Павел Клешнин

Reputation: 21

Two independent time axes in Chart.js

My task is to compare some current period's logs with older one. For example - this week logs and previous week logs. But when I create second axis like this 

scales : {
    xAxes: [
        {
            id: 'A',
            type: 'time',
            position: 'bottom'
        }, {
            id: 'B',
            type: 'time',
            position: 'top'
        }
    ]
}

I have an empty section, because all of my xAxes are 'time'-type, and time of points is not same (it is absolutely normal behavior). I have this situation

But I need to make independent axes, for example: top axis starts at 30sep, ends at 3oct bottom axis starts at 7oxt, ends at 10oct and all of them are same length

I've tried to create axes like this 

let MyScale = Chart.Scale.extend({type: 'time', ticks: this.makePrevDsTicks()});
Chart.scaleService.registerScaleType('myScale', MyScale, {type: 'time'});

But without 'ticks' property I have an Error : "TypeError: me.ticks is undefined" With 'ticks' I can't make it work like 'time' axis - labels are show like 'raw' (like Date objects)

There is behavior I mean, but I need chart with two time x-axes Example There is a pen codepen example

Upvotes: 1

Views: 220

Answers (1)

Павел Клешнин
Павел Клешнин

Reputation: 21

So, the solution was in time option All I needed to do was to set time.min to last timestamp of 'previous' dataset and time.max to first timestamp of 'current' dataset

Codepen example

Upvotes: 1

Related Questions