1

I am displaying multiple billboard.js charts on a single page and they all have the same issue. When the page initially loads, the first point in each chart is missing from the chart. The example below shows the most extreme and obvious case. When using hourly data, the first hour point is not rendered but the range of the chart still displays correctly, starting at 4:00 with the first point being rendered at 5:00.

Chart missing first point

1) I have confirmed that the data used to create the chart contains the missing 4:00 point.

2) I have confirmed, after creation, that the billboard.js chart object that is returned on creation of the chart also contains the 4:00 point in its data. Performing a chart.flush() or a chart.revert('seriesId') doesn't add the point.

3) I have custom styles implemented to alter ticks but none that target data points or lines on the chart itself.

4) I have a date range picker on the page and selecting a new date range to display in the chart will re-render the chart and the first point will display correctly (even if the date is switched back to the same date range as on page load, this works fine).

5) I cannot reproduce this behavior in a pen/fiddle. I'm creating charts as angularjs components that wrap chart creation using the current version of billboard.js. I'm hoping someone has had a similar issue or that this behavior has been reported/documented, I just haven't been able to find a fix. So, my official question is:

Why does the initial render of a billboard.js chart have a single missing point at the start? I'm aware that I can simply re-render but I wish to determine the cause so I don't continue to have this issue in the future and am not forced to double load charts on initial page loads.

CodeRequiem
  • 43
  • 6
  • I have since discovered that during my base call to render the chart, I was inadvertently calling my render twice (once in the $onInit() and once in my $onChanges() of my angularjs component). This has solved my problem by removing the extra call to render on page load. – CodeRequiem Jan 25 '18 at 14:15
  • The problem still remains that when calling a chartObject.flush(), I would have expected the chart to redraw with the correct data. I'm not sure if this is a bug or if the flush() only works if a value has changed (as a feature). Sorry if anyone else had this problem and the above wasn't the solution. – CodeRequiem Jan 25 '18 at 14:18
  • `.flush()` work regardless the data changes. Is quite difficult figure out the issue if can't be reproducible. If you can make some reproducible online demo, I can check for that. – Jae Sung Park Jan 29 '18 at 06:43

1 Answers1

0

Answer explained in the above comments.

CodeRequiem
  • 43
  • 6