title: How to scale a line chart (HTML5-canvas) in the middle at a specific index?
body: <p>How to scale it so when it reaches 900 pixels in width, it's in the middle. Example dataArray = [5, 10, 4, 5, 7, 8, 15, 1, 2, 100]; ( if canvas length is 1000px in this occasion, the index 8 should be in the middle of the height, (if hight is 500 in this occasion index 8 should be at 250px in the canvas)</p>
  <p>This is the code I know so far <a href="https://instructobit.com/tutorial/90/Creating-line-graphs-with-Javascript-using-an-HTML-canvas" rel="nofollow noreferrer">https://instructobit.com/tutorial/90/Creating-line-graphs-with-Javascript-using-an-HTML-canvas</a></p>
  <p>In this code he is scaling it with the highest point. That means that if you add an minus value to the array it won't work. If you know how to solve that problem please comment. What I need is, instead of his scaling which scales by hight, I need a more advance scaling system.</p>
  <p>Example of the scaling system:
  The array has these values for example <code>dataArr = [10, 40, 10, 50, 20, 100, -20, 80, 10, 204]</code> this is 10 values, just to make it easier to understand what's going on. And canvas has a value of <code>width=&quot;1000&quot; height=&quot;500&quot;</code>, so lets say I want the value with index 8 to be in the middle (250px height) the other values should still exist in the canvas, in the link you saw he had scaled it by largest values, in this one it's by mid point + the largest and lowest values needs to fit also.</p>
  <p>The width is 1000px so that means index 8 would be at 900px width and 250px height.</p>
  <p>Also note that, it should also work with 1000 values in the array and 1000+ (4 values should work and odd numbers like 71 should also work. If It get an value that can't be at exactly 900px width, then it takes the value as close to 900px as possible.)</p>
  <p>scaling it at middle when it's at 900px is also just an example, 400px should also work any thing should work (except if it's to low or to high compared to what the canvas has). -1px is impossible, in this occasion 1001px is impossible.</p>
  <p>sample code what I mean:</p>
  <pre><code>dataArray = [20, 100, -50, 20, 10, 15, 17, 87, 42, 0] 
  </code></pre>
  <p>dataArray[8] = 250;</p>
  <blockquote>
  <p>other values should be scaled also. dataArray[7] in this occasion should be more than 250, because dataArray[8] were 42 before it got the value 250 and 87 is greater than 42.</p>
  </blockquote>
  <p>Still you should be able to give it a maximum and minimum scale value.</p>
  <p>values under 42 should be under 250, and values over 42 should be over 250 SCALED.</p>