title: How to adjust scale or padding of automatic scaleBreaks with CanvasJS?
body: <p>Let's say I have some data with lots of data points grouped in tight groups but those groups are far from each other. For example, something like this imaginary example:</p>
  <p><a href="https://i.stack.imgur.com/du22d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/du22d.png" alt="screenshot as of CanvasJS rendering in 2022-02" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;  
  &lt;script&gt;
  window.onload = function () {
  
  var chart = new CanvasJS.Chart("chartContainer", {
      animationEnabled: true,
      title:{
          text: "Cost of rice"
      },
      axisX:{
          valueFormatString: "YYYY-MM-DD",
          scaleBreaks: {
              autoCalculate: true,
              maxNumberOfAutoBreaks: 100,
              collapsibleThreshold: "5%",
              spacing: "1%",
              type: "wavy",
              lineColor: "#777",
          }
      },
      axisY: {
          title: "Price",
          scaleBreaks: {
              autoCalculate: false,
          }
      },
      data: [{
          title: "Date",
          type: "line",
          xValueFormatString: "YYYY-MM-DD",
          color: "#F08080",
          dataPoints: [
              { x: new Date(1817, 0, 1), y: 610 },
              { x: new Date(1817, 0, 2), y: 680 },
              { x: new Date(1817, 0, 3), y: 690 },
              { x: new Date(1817, 0, 4), y: 700 },
              { x: new Date(1817, 0, 5), y: 710 },
              { x: new Date(1817, 0, 6), y: 658 },
              { x: new Date(1917, 0, 7), y: 734 },
              { x: new Date(1917, 0, 8), y: 963 },
              { x: new Date(1917, 0, 9), y: 847 },
              { x: new Date(1917, 0, 10), y: 853 },
              { x: new Date(1917, 0, 11), y: 869 },
              { x: new Date(2017, 0, 12), y: 943 },
              { x: new Date(2017, 0, 13), y: 970 },
              { x: new Date(2017, 0, 14), y: 869 },
              { x: new Date(2017, 0, 15), y: 890 },
              { x: new Date(2017, 0, 16), y: 930 },
              { x: new Date(2017, 0, 17), y: 1850 },
              { x: new Date(2017, 0, 18), y: 1905 },
              { x: new Date(2017, 0, 19), y: 1980 },
              { x: new Date(2017, 0, 20), y: 1858 },
              { x: new Date(2017, 0, 21), y: 1034 },
              { x: new Date(2017, 0, 22), y: 963 },
              { x: new Date(2017, 0, 23), y: 847 },
              { x: new Date(2017, 0, 24), y: 853 },
              { x: new Date(2017, 0, 25), y: 869 },
              { x: new Date(2017, 0, 26), y: 943 },
              { x: new Date(2017, 0, 27), y: 970 },
              { x: new Date(2017, 0, 28), y: 869 },
              { x: new Date(2017, 0, 29), y: 890 },
              { x: new Date(2017, 0, 30), y: 930 },
              { x: new Date(2017, 0, 31), y: 750 }
          ]
      }]
  });
  chart.render();
  
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="chartContainer" style="height: 370px; width: 100%;"&gt;&lt;/div&gt;
  &lt;script src="https://canvasjs.com/assets/script/canvasjs.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>When you run the above snippet, you'll find that CanvasJS automatically creates three x-axis scales with breaks as expected, but it still uses huge scale for each segment. For example, the middle segment shows dates from 1905 to 1930 when all data in the segment is actually within 1917-01-07 and 1917-01-11 so it all ends up rendered on a single vertical line.</p>
  <p><strong>Is it possible to adjust the padding length for each segment when the segments are automatically computed?</strong> For example, I would like to have segment with data from 1917-01-07 and 1917-01-11 to have 10% of data range (about half a day instead of 30 years) as the padding before and after the breaks. That would still show  the breaks but the data within the segment would be readable. I know that I could do this with <code>customBreaks</code> but then I would need to compute everything myself. I would like to have this fully automatic so that I can get optimal breaks according to area available for the graph.</p>