<div id="container" class="chart ybar">
  <d3fc-group class="cartesian-chart" auto-resize=""
    ><div class="chart-label top-label"></div>
    <div class="x-label bottom-label"></div>
    <div class="y-label left-label">
      <span class="splitter-label">Row ID</span
      ><span class="splitter-label">Quantity</span>
    </div>
    <d3fc-svg class="svg-plot-area plot-area"
      ><svg preserveAspectRatio="none">
        <g class="multi">
          <g>
            <line class="gridline-x" stroke="#bbb"></line>
            <line class="gridline-x" stroke="#bbb"></line>
            <line class="gridline-x" stroke="#bbb"></line>
            <line class="gridline-x" stroke="#bbb"></line>
            <line class="gridline-x" stroke="#bbb"></line>
            <line class="gridline-x" stroke="#bbb"></line>
            <line class="gridline-x" stroke="#bbb"></line>
            <line class="gridline-x" stroke="#bbb"></line>
            <line class="gridline-x" stroke="#bbb"></line>
            <line class="gridline-x" stroke="#bbb"></line>
            <line class="gridline-x" stroke="#bbb"></line>
          </g>
        </g>
        <g class="multi">
          <g>
            <g class="multi">
              <g>
                <g class="grouped">
                  <g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                  </g>
                </g>
                <g class="grouped">
                  <g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                    <g class="bar vertical" fill="#999"><path></path></g>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g></svg></d3fc-svg
    ><d3fc-svg class="x-axis bottom-axis"
      ><svg
        preserveAspectRatio="none"
        fill="none"
        font-size="10"
        font-family="sans-serif"
        text-anchor="middle"
      >
        <path class="domain" stroke="#000"></path></svg></d3fc-svg
    ><d3fc-svg class="y-axis left-axis"
      ><svg
        preserveAspectRatio="none"
        fill="none"
        font-size="10"
        font-family="sans-serif"
        text-anchor="end"
      >
        <path class="domain" stroke="#000"></path>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">0</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">10</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">20</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">30</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">40</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">50</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">60</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">70</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">80</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">90</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">100</text>
        </g>
      </svg></d3fc-svg
    ></d3fc-group
  >
  <div class="legend-container" borderbox-on-hover="true">
    <svg id="dragHandles" width="150">
      <g>
        <rect
          id="dragleft"
          class="vertical-drag-handle"
          height="34"
          width="9"
          fill="lightgreen"
          fill-opacity="0"
          cursor="ew-resize"
        ></rect>
        <rect
          id="dragtop"
          class="horizontal-drag-handle"
          height="9"
          width="132"
          fill="lightblue"
          fill-opacity="0"
          cursor="ns-resize"
        ></rect>
        <rect
          id="dragright"
          class="vertical-drag-handle"
          height="34"
          width="9"
          fill="lightgreen"
          fill-opacity="0"
          cursor="ew-resize"
        ></rect>
        <rect
          id="dragbottom"
          class="horizontal-drag-handle"
          height="9"
          width="132"
          fill="lightblue"
          fill-opacity="0"
          cursor="ns-resize"
        ></rect>
        <rect
          id="dragtopleft"
          class="corner-drag-handle top left"
          height="9"
          width="9"
          fill="red"
          fill-opacity="0"
          cursor="nwse-resize"
        ></rect>
        <rect
          id="dragtopright"
          class="corner-drag-handle top right"
          height="9"
          width="9"
          fill="red"
          fill-opacity="0"
          cursor="nesw-resize"
        ></rect>
        <rect
          id="dragbottomright"
          class="corner-drag-handle bottom right"
          height="9"
          width="9"
          fill="red"
          fill-opacity="0"
          cursor="nwse-resize"
        ></rect>
        <rect
          id="dragbottomleft"
          class="corner-drag-handle bottom left"
          height="9"
          width="9"
          fill="red"
          fill-opacity="0"
          cursor="nesw-resize"
        ></rect>
      </g></svg
    ><g class="legend-controls"
      ><span id="up-arrow" class="disabled">▲</span>
      <span id="page-text">1/1</span>
      <span id="down-arrow" class="disabled">▼</span> </g
    ><svg class="legend">
      <g class="legendCells">
        <g class="cell">
          <circle class="swatch"></circle>
          <text class="label">Ro</text>
          <title>Row ID</title>
        </g>
        <g class="cell">
          <circle class="swatch"></circle>
          <text class="label">Qu</text>
          <title>Quantity</title>
        </g>
      </g>
    </svg>
  </div>
  <div class="tooltip"><ul id="tooltip-values"></ul></div>
</div>
