title: Highstock/chart - On resize, don't crop chart
body: <p><strong>How to keep the chart from cropping on resize, but instead just change its viewport</strong>?</p>
  
  <p>I find it a a bit hard to explain, so please let me know if more explanation is needed.</p>
  
  <p>The chart on the first screenshot look nice, they have a 'normal spacing between them and the bars are not cropped. This one has a 1000px width.</p>
  
  <p><a href="https://i.stack.imgur.com/1V3tw.png" rel="nofollow noreferrer">Chart box wide</a></p>
  
  <p>On the second screenshot, the chart is only 300px wide, and the candlesticks become 'cropped'.. </p>
  
  <p><a href="https://i.stack.imgur.com/eiNvB.png" rel="nofollow noreferrer">Chart box cropped</a></p>
  
  <p>Instead I would like to only change the viewport, so that the bars are never cropped and are always te same size.. Only the date-range (Viewport) changes.. You see more bars on a wider chart, but it doesn't meen the bars itself should grow or shrink. </p>
  
  <p>I tried it with simple algoritme, but its very prone to error.</p>
  
  <pre><code>    let parentW = this._elementRef.nativeElement.parentNode.clientWidth,
          data = this.chart.xAxis[0].series[0].data,
          barW = 10,
          barsToShow = Math.ceil(parentW / barW),
          firstBar = (data[data.length - barsToShow] || data[0]),
          lastBar = data[data.length - 1];
  
      this.chart.xAxis[0].setExtremes(firstBar.x, lastBar.x, redraw);
  </code></pre>
  
  <p>I couldn't find any setting in the Highcharts doc and google didn't help much either. Many thanks</p>