title: How to remove weekend datetime gaps from x-axis of a financial chart?
body: <p>I have a use case where I pull and plot <code>Forex</code> data in the form of <code>ask and bid</code> on the graph and this is based on <code>minute, hour or day candlesticks</code> and I am only plotting the <code>closing</code> value for <code>bid and ask</code> as a <code>spline</code>. </p>
  
  <h2>Issue</h2>
  
  <p>The endpoints that I am using their <code>Forex</code> data feed is not available from <code>Friday 8pm</code> to <code>Sunday 9pm</code>. Let's say I have the following use case </p>
  
  <ul>
  <li>Plot a 200 data points (i.e. hourly candle) on the graph at a time, on new candle phase out the oldest and plot the newest</li>
  <li>The X-Axis is the data point's <code>datetime</code> in <code>UTC ISO Format</code> </li>
  <li>The Y-Axis is the value of ask and bid</li>
  <li>At a time the graph shows <code>4.1 days worth of hourly candle</code> </li>
  </ul>
  
  <p>The graph is <code>pretty</code> and <code>smooth</code> when the <code>datetime</code> on <code>x-axis</code> do not have any gaps. The candle timestamps are returned in the following form </p>
  
  <pre><code>2018-06-29T16:00:00.000000000Z
  2018-06-29T17:00:00.000000000Z
  2018-06-29T19:00:00.000000000Z
  2018-06-29T20:00:00.000000000Z (Friday last candle 8pm)
  2018-07-01T21:00:00.000000000Z (Sunday first candle 9pm) 
  2018-07-01T22:00:00.000000000Z
  2018-07-01T23:00:00.000000000Z
  2018-07-02T00:00:00.000000000Z
  </code></pre>
  
  <p>As soon as there is a gap (around <code>47-49 hours</code>) everything gets compressed to accommodate for the stretched part of the graph as shown below (Using <a href="https://plot.ly/javascript/" rel="noreferrer">plotly.js</a>)</p>
  
  <p><a href="https://i.stack.imgur.com/Vm60P.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Vm60P.png" alt="Using PlotlyJS Library"></a></p>
  
  <p>Mostly, financial graphs do not show the gap. For example, looking at the <a href="https://www.tradingview.com/symbols/USDCAD/" rel="noreferrer">TradingView</a> interactive chart you will see the following for <code>weekend</code> </p>
  
  <p><a href="https://i.stack.imgur.com/FLdJr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FLdJr.png" alt="enter image description here"></a></p>
  
  <p>If you know how to tackle this issue with open source charting libraries (excluding <code>TradingView</code>) then please share your solution. </p>