Chartjs-Drawing linear chart without gaps in Chart.js

0👍

I figured out a workaround. It requires some hacking but it works:

1) First, modify your dataset. Iterate over all your points and mutate x values so that they correspond to new position on your chart. Save the original x value in some property for future use (in tooltips)

2) Now you can draw the data on the chart and they look properly. The problem is with tooltips and ticks.

How to deal with the ticks:

The ticks are a list of mutated numbers (they don’t correspond to their original values). You have utilize a hack. Temporarily overrite chartController.ticks in afterBuildTicks method with array of objects (instead of plain numbers) with original corresponding x values. You have to approximate original x value for every tick.
Having that you can use this information in ticks callback to return correct labels for ticks.
With such mutated data the chart won’t plot. You have to revert it to the state before mutation. In the method afterTickToLabelConversion restore the ticks. Bear in mind that now they are stored in property ticksAsNumbers

The similar hack should be done with tooltips callbacks. You have access to the dataset and utated x value. Approximate original x value for mutated x and that’s it.

0👍

You can use the spanGap attribute. From the documentation:

If [spanGaps is set to] true, lines will be drawn between points
with no or null data. If false, points with NaN data will create a
break in the line

Leave a comment