JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="graph"></canvas><br><br>
<input type="text" id="text1" value="text 1"/><br><br>
<input type="text" id="text2" value="text 2"/><br><br>
<input type="text" id="text3" value="text 3"/><br><br>
<input type="text" id="text4" value="text 4"/><br><br>
<input type="text" id="text5" value="text 5"/><br><br>
<input type="text" id="text6" value="text 6"/><br><br>
<input type="text" id="text7" value="text 7"/><br><br>

JavaScript

var a = document.getElementById("text1").value;
            var b = document.getElementById("text2").value;
            var c = document.getElementById("text3").value;
            var d = document.getElementById("text4").value;
            var e = document.getElementById("text5").value;
            var f = document.getElementById("text6").value;
            var g = document.getElementById("text7").value;

            var graph;
            var xPadding = 30;
            var yPadding = 30;
            
            // Notice I changed The X values
            var data = { values:[
                { X: 0, Y: 12 },
                { X: 2, Y: 28 },
                { X: 3, Y: 18 },
                { X: 4, Y: 34 },
                { X: 5, Y: 40 },
                { X: 6, Y: 80 },
                { X: 7, Y: 80 }
            ]};

            // Returns the max Y value in our data list
            function getMaxY() {
                var max = 0;
                
                for(var i = 0; i < data.values.length; i ++) {
                    if(data.values[i].Y > max) {
                        max = data.values[i].Y;
                    }
                }
                
                max += 10 - max % 10;
                return max;
            }

            // Returns the max X value in our data list
            function getMaxX() {
                var max = 0;
                
                for(var i = 0; i < data.values.length; i ++) {
                    if(data.values[i].X > max) {
                        max = data.values[i].X;
                    }
                }
                
                // omited
              //max += 10 - max % 10;
                return max;
            }
            
            // Return the x pixel for a graph point
            function getXPixel(val) {
                // uses the getMaxX() function
                return ((graph.width - xPadding) / (getMaxX() + 1)) * val + (xPadding * 1.5);
                // was
      ...