CODEWITHSUNDEEP
javascriptvue.jschart.jsvue-chartjschartjs-plugin-annotation
flba
flba

Reputation: 5

Chartjs plugin annotation timestamp

I am using Chart.Js "2.8.0" and chartjs-plugin-annotation "0.5.7" to display boxes based on timestamp intervals

I am trying to show something like this: enter image description here based on timstamp intervals, but cannot find something from their docs.

The result is...: enter image description here

code examples:

annotations.push({
    type: 'box',
    id: `status-${index}`,
    xScaleID: `x-axis-${index}`,
    yScaleID: `y-axis-${index}`,
    backgroundColor: 'rgba(188, 170, 164, 0.2)',
    borderWidth: 0,
    xMin: data.linkedTime, // timestamp
    xMax: data.unlinkedTime, // timestamp - can be null(till present)
    label: {
        enabled: true,
        fontSize: 12,
        drawTime: 'afterDraw',
        content: data.name,
        xAdjust: 0,
        yAdjust: 0,
        position: 'top'
    }
});

chart xaxis (using dayjs let labels = items.map(({ time }) => this.$dayjs.unix(time));):

xAxes: [
    {
        type: 'time',
        time: {
            unit: 'day',
            unitStepSize: 1,
            displayFormats: {
                day: 'MMM DD'
            }
        }
    }
],

My guess is that i should format the xMin/xMAx values accordingly to xaxis (daysjs stuff), tried something('Oct 31' or this.$dayjs.unix(timestamp)) but it doesn't work... i guess i am missing something

Upvotes: 0

Views: 862

Answers (1)

tauzN
tauzN

Reputation: 7001

Chart.js uses timestamps defined as milliseconds since the epoch. Source

Use .valueOf() to get timestamp in milliseconds from dayjs. Source

xMin: dayjs(...).valueOf(),
xMax: dayjs(...).valueOf(),

Upvotes: 1

Related Questions