0

I want to draw a linear chart of currency rates. There are some days when there are no rates from the market (holidays). I would like to remove these days from the chart but without ugly gaps or straight lines between the days with rates.

You can see an example on this chart: linear chart with gap between 2nd and 4th of May

On 3rd of May there is no data, the chart is linked and the missing date is removed from the legend.

How do I get such effect using Chart.js?

Artur Owczarek
  • 1,146
  • 1
  • 11
  • 22
  • This is possibly a duplicate of: https://stackoverflow.com/questions/25284124/chart-js-gap-between-points – Donny Bridgen May 09 '17 at 14:18
  • @DonnyBridgen This question seems to actually be asking the opposite of the linked question. That question is asking how to create gaps. This question is asking how to avoid gaps. – Tot Zam May 16 '17 at 17:46
  • @ArturOwczarek Do you have a JSFiddle with the code you are currently using, that you can share? – Tot Zam May 17 '17 at 00:28

2 Answers2

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.

Artur Owczarek
  • 1,146
  • 1
  • 11
  • 22
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

David Bulté
  • 2,988
  • 3
  • 31
  • 43