generateYGrids() {
      const labels = this.getYLabels();
      const labelCount = labels.values.length;
      const usableHeight = this.height - this.padding.bottom - this.padding.top;
      const max = this.utility.getMaxValue(this.getValues());
      const min = this.utility.getMinValue(this.getValues());
      const positiveMin = min < 0 ? this.utility.toPositive(min) : min;
      const grid = document.createElement("g");
      grid.setAttribute("class", "graph-svg-group");
      const rect = document.createElement("rect");
      rect.setAttribute("x", "0");
      rect.setAttribute("y", "0");
      rect.setAttribute("fill", this.backgroundColor);
      rect.setAttribute("width", "100%");
      rect.setAttribute("height", "100%");
      rect.setAttribute("stroke-width", "0");
      grid.appendChild(rect);

      for (let x = 0; x < labelCount; x += 1) {
        const pointY = this.getPointYAxis(usableHeight, (max + positiveMin), (labels.values[x] + positiveMin));
        if (this.showHorizontalGrids) {
          const line = document.createElement("line");
          line.setAttribute("x1", `${this.padding.left}px`);
          line.setAttribute("y1", `${pointY}px`);
          line.setAttribute("x2", `${this.width - this.padding.right}px`);
          line.setAttribute("y2", `${pointY}px`);
          line.setAttribute("stroke", `${this.gridColor}`);
          line.setAttribute("stroke-width", "2");
          grid.appendChild(line);
        }

        if (this.showYAxisLabel) {
          const text = document.createElement("text");
          text.setAttribute("x", `${this.yLabel.start}`);
          text.setAttribute("y", `${pointY + this.yLabel.offset}px`);
          text.setAttribute("fill", `${this.textColor}`);
          text.setAttribute("text-anchor", "end");
          text.innerHTML = x > 0 ? labels.texts[x] : "";
          grid.appendChild(text);
        }
      }

      return grid;
    }
/**
     * Generate the group of SVG elements for the graph YAxis grids.
     * @returns {SVGGElement}
     */
Generate the group of SVG elements for the graph YAxis grids.
Generate the group of SVG elements for the graph YAxis grids .
generateYGrids() {
      const labels = this.getYLabels();
      const labelCount = labels.values.length;
      const usableHeight = this.height - this.padding.bottom - this.padding.top;
      const max = this.utility.getMaxValue(this.getValues());
      const min = this.utility.getMinValue(this.getValues());
      const positiveMin = min < 0 ? this.utility.toPositive(min) : min;
      const grid = document.createElement("g");
      grid.setAttribute("class", "graph-svg-group");
      const rect = document.createElement("rect");
      rect.setAttribute("x", "0");
      rect.setAttribute("y", "0");
      rect.setAttribute("fill", this.backgroundColor);
      rect.setAttribute("width", "100%");
      rect.setAttribute("height", "100%");
      rect.setAttribute("stroke-width", "0");
      grid.appendChild(rect);
      for (let x = 0; x < labelCount; x += 1) {
        const pointY = this.getPointYAxis(usableHeight, (max + positiveMin), (labels.values[x] + positiveMin));
        if (this.showHorizontalGrids) {
          const line = document.createElement("line");
          line.setAttribute("x1", `${this.padding.left}px`);
          line.setAttribute("y1", `${pointY}px`);
          line.setAttribute("x2", `${this.width - this.padding.right}px`);
          line.setAttribute("y2", `${pointY}px`);
          line.setAttribute("stroke", `${this.gridColor}`);
          line.setAttribute("stroke-width", "2");
          grid.appendChild(line);
        }
        if (this.showYAxisLabel) {
          const text = document.createElement("text");
          text.setAttribute("x", `${this.yLabel.start}`);
          text.setAttribute("y", `${pointY + this.yLabel.offset}px`);
          text.setAttribute("fill", `${this.textColor}`);
          text.setAttribute("text-anchor", "end");
          text.innerHTML = x > 0 ? labels.texts[x] : "";
          grid.appendChild(text);
        }
      }
      return grid;
    }
generateYGrids ( ) { const labels = this . getYLabels ( ) ; const labelCount = labels . values . length ; const usableHeight = this . height - this . padding . bottom - this . padding . top ; const max = this . utility . getMaxValue ( this . getValues ( ) ) ; const min = this . utility . getMinValue ( this . getValues ( ) ) ; const positiveMin = min < 0 ? this . utility . toPositive ( min ) : min ; const grid = document . createElement ( "g" ) ; grid . setAttribute ( "class" , "graph-svg-group" ) ; const rect = document . createElement ( "rect" ) ; rect . setAttribute ( "x" , "0" ) ; rect . setAttribute ( "y" , "0" ) ; rect . setAttribute ( "fill" , this . backgroundColor ) ; rect . setAttribute ( "width" , "100%" ) ; rect . setAttribute ( "height" , "100%" ) ; rect . setAttribute ( "stroke-width" , "0" ) ; grid . appendChild ( rect ) ; for ( let x = 0 ; x < labelCount ; x += 1 ) { const pointY = this . getPointYAxis ( usableHeight , ( max + positiveMin ) , ( labels . values [ x ] + positiveMin ) ) ; if ( this . showHorizontalGrids ) { const line = document . createElement ( "line" ) ; line . setAttribute ( "x1" , ` ${ this . padding . left } ` ) ; line . setAttribute ( "y1" , ` ${ pointY } ` ) ; line . setAttribute ( "x2" , ` ${ this . width - this . padding . right } ` ) ; line . setAttribute ( "y2" , ` ${ pointY } ` ) ; line . setAttribute ( "stroke" , ` ${ this . gridColor } ` ) ; line . setAttribute ( "stroke-width" , "2" ) ; grid . appendChild ( line ) ; } if ( this . showYAxisLabel ) { const text = document . createElement ( "text" ) ; text . setAttribute ( "x" , ` ${ this . yLabel . start } ` ) ; text . setAttribute ( "y" , ` ${ pointY + this . yLabel . offset } ` ) ; text . setAttribute ( "fill" , ` ${ this . textColor } ` ) ; text . setAttribute ( "text-anchor" , "end" ) ; text . innerHTML = x > 0 ? labels . texts [ x ] : "" ; grid . appendChild ( text ) ; } } return grid ; }
Generate the group of SVG elements for the graph YAxis grids.
Generate the group of SVG elements for the graph YAxis grids .