chart_template.svg

<svg id="bench-chart" viewBox="0 0 830 580" xmlns="http://www.w3.org/2000/svg">
  <style>
    #bench-chart .grid {
      stroke: #777777;
      stroke-width: 1;
    }

    #bench-chart .dashed {
      stroke: #777777;
      opacity: 0.3;
      stroke-width: 1;
      stroke-dasharray: 5, 5;
    }

    #bench-chart .labels {
      fill: #777777;
      font-size: 13px;
      font-family: sans-serif;
    }

    #bench-chart .x-labels {
      text-anchor: middle;
    }

    #bench-chart .y-labels {
      text-anchor: start;
    }

    #bench-chart .lib-label {
      font-size: 12px;
      font-family: sans-serif;
      text-anchor: end;
    }

    #bench-chart .line-med {
      stroke-width: 6;
      opacity: 0.6;
    }
  </style>

  <g class="grid">
    <line x1="100" y1="520" x2="830" y2="520"></line>
    <line x1="100" y1="520" x2="100" y2="0"></line>
  </g>

  <g class="dashed">
    <line x1="330" y1="520" x2="330" y2="0"></line>
    <line x1="560" y1="520" x2="560" y2="0"></line>
    <line x1="790" y1="520" x2="790" y2="0"></line>

    <line x1="100" y1="20" x2="790" y2="20"></line>
    <line x1="100" y1="145" x2="790" y2="145"></line>
    <line x1="100" y1="270" x2="790" y2="270"></line>
    <line x1="100" y1="395" x2="790" y2="395"></line>
  </g>

  <g class="labels x-labels">
    <text x="100" y="540">10</text>
    <text x="330" y="540">100</text>
    <text x="560" y="540">1000</text>
    <text x="790" y="540">10000</text>
    <text x="445" y="560">ITERATIONS</text>
  </g>

  <g class="labels y-labels">
    <text x="795" y="23">100%</text>
    <text x="795" y="148">75%</text>
    <text x="795" y="273">50%</text>
    <text x="795" y="398">25%</text>
  </g>

  <!--CONTENT_START-->
  <!--CONTENT_END-->
</svg>