0

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

flba
  • 5
  • 3
  • AFAIK the data for time axes are managed as epoch (I don't recall in CHART.2.8.0 if there was any difference). Can you provide the data or to create a codepen in order to investigate a little bit more? off-topic: the box annotation is configured to have the label but in version 0.5.7 the box label wasn't implemented. – user2057925 Nov 02 '22 at 08:54
  • I have created a codepen (using luxon): https://codepen.io/stockinail/pen/eYKZmOY I set xMin and xMax with the date format. It sounds working. – user2057925 Nov 02 '22 at 09:16
  • Thanks @user2057925, fixed with: `dayjs.unix(timestamp).valueOf()` The only downside is the label that is not implemented on this version of the plugin.... trying to find another way... – flba Nov 03 '22 at 08:09

1 Answers1

1

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(),
tauzN
  • 5,162
  • 2
  • 16
  • 21