CODEWITHSUNDEEP
chart.jslinechart
KurtPreston
KurtPreston

Reputation: 1152

Chart.js v3: how to allow tick label overflow?

I recently upgraded from Chart.js v2 to v3. I am drawing realtime line charts with a time-based x-axis that scrolls right as time passes.

In Chart.js v3, as my x-axis tick labels begins to approach the left edge of the chart, it resizes the graph to fit the full label. As shown in the attached image, this creates an empty gap on the left-side of my chart. In Chart.js v2, it would not resize the graph, and would instead allow the label to overflow the canvas.

Chart.js x-axis tick overflow

My x-axis options are:

{
  type: 'time',
  axis: 'x',
  min: minDate.getTime(),
  max: maxDate.getTime()
  time: {},
  ticks: {
    minRotation: 45,
    maxRotation: 45,
    source: 'labels'
  }
};

Is there any option to restore the old behavior and allow the tick labels to overflow?

Upvotes: 0

Views: 1042

Answers (2)

KurtPreston
KurtPreston

Reputation: 1152

I was eventually able to get the desired behavior using the afterFit callback.

{
  type: 'time',
  afterFit: (scaleInstance) => {
    scaleInstance.paddingLeft = 0;
    scaleInstance.paddingRight = 0;
  }
}

Upvotes: 1

kurkle
kurkle

Reputation: 383

You could format the first tick to be empty string, using ticks.callback

{
  type: 'time',
  ticks: {
    callback: (value, index) => index === 0 ? '' : value
  }
}

example in codepen

enter image description here

Upvotes: 1

Related Questions