generateXGrids() {
      const labels = this.getXLabels();
      const labelCount = labels.length;
      const usableWidth = this.width - this.padding.left - this.padding.right;
      const max = labelCount;
      const grid = document.createElement("g");
      grid.setAttribute("class", "graph-svg-group");

      for (let x = 0; x < labelCount; x += 1) {
        const pointX = this.getPointXAxis(usableWidth, max, x);
        if (this.showVerticalGrids) {
          const line = document.createElement("line");
          line.setAttribute("x1", `${pointX}px`);
          line.setAttribute("y1", `${this.padding.top}px`);
          line.setAttribute("x2", `${pointX}px`);
          line.setAttribute("y2", `${this.height - this.padding.bottom}px`);
          line.setAttribute("stroke", `${this.gridColor}`);
          line.setAttribute("stroke-width", "2");
          grid.appendChild(line);
        }

        this.xCoords.push(pointX);

        if (this.showXAxisLabel) {
          const text = document.createElement("text");
          text.setAttribute("x", `${pointX}`);
          text.setAttribute("y", `${this.height - this.xLabel.start + this.xLabel.offset}px`);
          text.setAttribute("fill", `${this.textColor}`);
          text.setAttribute("text-anchor", "middle");
          text.innerHTML = labels[x];
          grid.appendChild(text);
        }
      }

      return grid;
    }
/**
     * Generate the group of SVG elements for the graph XAxis grids.
     * @returns {SVGGElement}
     */
Generate the group of SVG elements for the graph XAxis grids.
Generate the group of SVG elements for the graph XAxis grids .
generateXGrids() {
      const labels = this.getXLabels();
      const labelCount = labels.length;
      const usableWidth = this.width - this.padding.left - this.padding.right;
      const max = labelCount;
      const grid = document.createElement("g");
      grid.setAttribute("class", "graph-svg-group");
      for (let x = 0; x < labelCount; x += 1) {
        const pointX = this.getPointXAxis(usableWidth, max, x);
        if (this.showVerticalGrids) {
          const line = document.createElement("line");
          line.setAttribute("x1", `${pointX}px`);
          line.setAttribute("y1", `${this.padding.top}px`);
          line.setAttribute("x2", `${pointX}px`);
          line.setAttribute("y2", `${this.height - this.padding.bottom}px`);
          line.setAttribute("stroke", `${this.gridColor}`);
          line.setAttribute("stroke-width", "2");
          grid.appendChild(line);
        }
        this.xCoords.push(pointX);
        if (this.showXAxisLabel) {
          const text = document.createElement("text");
          text.setAttribute("x", `${pointX}`);
          text.setAttribute("y", `${this.height - this.xLabel.start + this.xLabel.offset}px`);
          text.setAttribute("fill", `${this.textColor}`);
          text.setAttribute("text-anchor", "middle");
          text.innerHTML = labels[x];
          grid.appendChild(text);
        }
      }
      return grid;
    }
generateXGrids ( ) { const labels = this . getXLabels ( ) ; const labelCount = labels . length ; const usableWidth = this . width - this . padding . left - this . padding . right ; const max = labelCount ; const grid = document . createElement ( "g" ) ; grid . setAttribute ( "class" , "graph-svg-group" ) ; for ( let x = 0 ; x < labelCount ; x += 1 ) { const pointX = this . getPointXAxis ( usableWidth , max , x ) ; if ( this . showVerticalGrids ) { const line = document . createElement ( "line" ) ; line . setAttribute ( "x1" , ` ${ pointX } ` ) ; line . setAttribute ( "y1" , ` ${ this . padding . top } ` ) ; line . setAttribute ( "x2" , ` ${ pointX } ` ) ; line . setAttribute ( "y2" , ` ${ this . height - this . padding . bottom } ` ) ; line . setAttribute ( "stroke" , ` ${ this . gridColor } ` ) ; line . setAttribute ( "stroke-width" , "2" ) ; grid . appendChild ( line ) ; } this . xCoords . push ( pointX ) ; if ( this . showXAxisLabel ) { const text = document . createElement ( "text" ) ; text . setAttribute ( "x" , ` ${ pointX } ` ) ; text . setAttribute ( "y" , ` ${ this . height - this . xLabel . start + this . xLabel . offset } ` ) ; text . setAttribute ( "fill" , ` ${ this . textColor } ` ) ; text . setAttribute ( "text-anchor" , "middle" ) ; text . innerHTML = labels [ x ] ; grid . appendChild ( text ) ; } } return grid ; }
Generate the group of SVG elements for the graph XAxis grids.
Generate the group of SVG elements for the graph XAxis grids .