<div id="container" class="chart yline">
  <d3fc-group class="cartesian-chart" auto-resize=""
    ><div
      class="chart-label top-label"
      style="margin-bottom: 1em; margin-top: 0px"
    ></div>
    <div class="x-label bottom-label">timestamp</div>
    <div class="y-label left-label">px</div>
    <d3fc-svg class="svg-plot-area plot-area"
      ><svg viewBox="0 0 964 595" preserveAspectRatio="none">
        <g class="multi">
          <g>
            <line
              class="gridline-y"
              x1="48.2"
              x2="48.2"
              y1="595"
              y2="0"
              stroke="#bbb"
              style="display: none"
            ></line>
            <line
              class="gridline-y"
              x1="144.6"
              x2="144.6"
              y1="595"
              y2="0"
              stroke="#bbb"
              style="display: none"
            ></line>
            <line
              class="gridline-y"
              x1="241"
              x2="241"
              y1="595"
              y2="0"
              stroke="#bbb"
              style="display: none"
            ></line>
            <line
              class="gridline-y"
              x1="337.4"
              x2="337.4"
              y1="595"
              y2="0"
              stroke="#bbb"
              style="display: none"
            ></line>
            <line
              class="gridline-y"
              x1="433.8"
              x2="433.8"
              y1="595"
              y2="0"
              stroke="#bbb"
              style="display: none"
            ></line>
            <line
              class="gridline-y"
              x1="530.2"
              x2="530.2"
              y1="595"
              y2="0"
              stroke="#bbb"
              style="display: none"
            ></line>
            <line
              class="gridline-y"
              x1="626.6"
              x2="626.6"
              y1="595"
              y2="0"
              stroke="#bbb"
              style="display: none"
            ></line>
            <line
              class="gridline-y"
              x1="723"
              x2="723"
              y1="595"
              y2="0"
              stroke="#bbb"
              style="display: none"
            ></line>
            <line
              class="gridline-y"
              x1="819.4"
              x2="819.4"
              y1="595"
              y2="0"
              stroke="#bbb"
              style="display: none"
            ></line>
            <line
              class="gridline-y"
              x1="915.8"
              x2="915.8"
              y1="595"
              y2="0"
              stroke="#bbb"
              style="display: none"
            ></line>
            <line
              class="gridline-x"
              y1="595"
              y2="595"
              x1="0"
              x2="964"
              stroke="#bbb"
              style="stroke-width: 1; stroke: rgb(22, 22, 22)"
            ></line>
            <line
              class="gridline-x"
              y1="535.5"
              y2="535.5"
              x1="0"
              x2="964"
              stroke="#bbb"
              style="stroke-width: 1; stroke: rgb(234, 237, 239)"
            ></line>
            <line
              class="gridline-x"
              y1="476"
              y2="476"
              x1="0"
              x2="964"
              stroke="#bbb"
              style="stroke-width: 1; stroke: rgb(234, 237, 239)"
            ></line>
            <line
              class="gridline-x"
              y1="416.5"
              y2="416.5"
              x1="0"
              x2="964"
              stroke="#bbb"
              style="stroke-width: 1; stroke: rgb(234, 237, 239)"
            ></line>
            <line
              class="gridline-x"
              y1="357"
              y2="357"
              x1="0"
              x2="964"
              stroke="#bbb"
              style="stroke-width: 1; stroke: rgb(234, 237, 239)"
            ></line>
            <line
              class="gridline-x"
              y1="297.5"
              y2="297.5"
              x1="0"
              x2="964"
              stroke="#bbb"
              style="stroke-width: 1; stroke: rgb(234, 237, 239)"
            ></line>
            <line
              class="gridline-x"
              y1="238"
              y2="238"
              x1="0"
              x2="964"
              stroke="#bbb"
              style="stroke-width: 1; stroke: rgb(234, 237, 239)"
            ></line>
            <line
              class="gridline-x"
              y1="178.50000000000003"
              y2="178.50000000000003"
              x1="0"
              x2="964"
              stroke="#bbb"
              style="stroke-width: 1; stroke: rgb(234, 237, 239)"
            ></line>
            <line
              class="gridline-x"
              y1="118.99999999999997"
              y2="118.99999999999997"
              x1="0"
              x2="964"
              stroke="#bbb"
              style="stroke-width: 1; stroke: rgb(234, 237, 239)"
            ></line>
            <line
              class="gridline-x"
              y1="59.499999999999986"
              y2="59.499999999999986"
              x1="0"
              x2="964"
              stroke="#bbb"
              style="stroke-width: 1; stroke: rgb(234, 237, 239)"
            ></line>
            <line
              class="gridline-x"
              y1="0"
              y2="0"
              x1="0"
              x2="964"
              stroke="#bbb"
              style="stroke-width: 1; stroke: rgb(234, 237, 239)"
            ></line>
          </g>
        </g>
        <g class="multi">
          <g>
            <g class="multi">
              <g>
                <path
                  class="line"
                  fill="none"
                  stroke="#000"
                  d="M48.2,595L144.6,535.5L241,476L337.4,416.5L433.8,357L530.2,297.5L626.6,238L723,178.5L819.4,119L915.8,59.5"
                  style="stroke: rgb(31, 119, 180); stroke-width: 3"
                ></path>
              </g>
            </g>
          </g>
        </g></svg></d3fc-svg
    ><d3fc-svg class="x-axis bottom-axis"
      ><svg
        preserveAspectRatio="none"
        viewBox="0 0 964 24"
        fill="none"
        font-size="10"
        font-family="sans-serif"
        text-anchor="middle"
      >
        <path class="domain" stroke="#000" d="M0,6L0,0L964,0L964,6"></path>
        <g class="tick" transform="translate(48.2, 0)">
          <path stroke="#000" d="M0,0L0,6"></path>
          <text
            transform="translate(0, 9)"
            fill="#000"
            visibility="false"
            dy="0.71em"
          >
            04:41
          </text>
        </g>
        <g class="tick" transform="translate(144.6, 0)">
          <path stroke="#000" d="M0,0L0,6"></path>
          <text
            transform="translate(0, 9)"
            fill="#000"
            visibility="false"
            dy="0.71em"
          >
            .100
          </text>
        </g>
        <g class="tick" transform="translate(241, 0)">
          <path stroke="#000" d="M0,0L0,6"></path>
          <text
            transform="translate(0, 9)"
            fill="#000"
            visibility="false"
            dy="0.71em"
          >
            .200
          </text>
        </g>
        <g class="tick" transform="translate(337.4, 0)">
          <path stroke="#000" d="M0,0L0,6"></path>
          <text
            transform="translate(0, 9)"
            fill="#000"
            visibility="false"
            dy="0.71em"
          >
            .300
          </text>
        </g>
        <g class="tick" transform="translate(433.8, 0)">
          <path stroke="#000" d="M0,0L0,6"></path>
          <text
            transform="translate(0, 9)"
            fill="#000"
            visibility="false"
            dy="0.71em"
          >
            .400
          </text>
        </g>
        <g class="tick" transform="translate(530.2, 0)">
          <path stroke="#000" d="M0,0L0,6"></path>
          <text
            transform="translate(0, 9)"
            fill="#000"
            visibility="false"
            dy="0.71em"
          >
            .500
          </text>
        </g>
        <g class="tick" transform="translate(626.6, 0)">
          <path stroke="#000" d="M0,0L0,6"></path>
          <text
            transform="translate(0, 9)"
            fill="#000"
            visibility="false"
            dy="0.71em"
          >
            .600
          </text>
        </g>
        <g class="tick" transform="translate(723, 0)">
          <path stroke="#000" d="M0,0L0,6"></path>
          <text
            transform="translate(0, 9)"
            fill="#000"
            visibility="false"
            dy="0.71em"
          >
            .700
          </text>
        </g>
        <g class="tick" transform="translate(819.4, 0)">
          <path stroke="#000" d="M0,0L0,6"></path>
          <text
            transform="translate(0, 9)"
            fill="#000"
            visibility="false"
            dy="0.71em"
          >
            .800
          </text>
        </g>
        <g class="tick" transform="translate(915.8, 0)">
          <path stroke="#000" d="M0,0L0,6"></path>
          <text
            transform="translate(0, 9)"
            fill="#000"
            visibility="false"
            dy="0.71em"
          >
            .900
          </text>
        </g>
      </svg></d3fc-svg
    ><d3fc-svg class="y-axis left-axis"
      ><svg
        preserveAspectRatio="none"
        viewBox="-36 0 36 595"
        fill="none"
        font-size="10"
        font-family="sans-serif"
        text-anchor="end"
      >
        <path class="domain" stroke="#000" d="M-6,595L0,595L0,0L-6,0"></path>
        <g class="tick" transform="translate(0, 595)">
          <path stroke="#000" d="M0,0L-6,0"></path>
          <text
            transform="translate(-9, 0)"
            fill="#000"
            visibility="false"
            dy="0.32em"
          >
            0
          </text>
        </g>
        <g class="tick" transform="translate(0, 535.5)">
          <path stroke="#000" d="M0,0L-6,0"></path>
          <text
            transform="translate(-9, 0)"
            fill="#000"
            visibility="false"
            dy="0.32em"
          >
            1
          </text>
        </g>
        <g class="tick" transform="translate(0, 476)">
          <path stroke="#000" d="M0,0L-6,0"></path>
          <text
            transform="translate(-9, 0)"
            fill="#000"
            visibility="false"
            dy="0.32em"
          >
            2
          </text>
        </g>
        <g class="tick" transform="translate(0, 416.5)">
          <path stroke="#000" d="M0,0L-6,0"></path>
          <text
            transform="translate(-9, 0)"
            fill="#000"
            visibility="false"
            dy="0.32em"
          >
            3
          </text>
        </g>
        <g class="tick" transform="translate(0, 357)">
          <path stroke="#000" d="M0,0L-6,0"></path>
          <text
            transform="translate(-9, 0)"
            fill="#000"
            visibility="false"
            dy="0.32em"
          >
            4
          </text>
        </g>
        <g class="tick" transform="translate(0, 297.5)">
          <path stroke="#000" d="M0,0L-6,0"></path>
          <text
            transform="translate(-9, 0)"
            fill="#000"
            visibility="false"
            dy="0.32em"
          >
            5
          </text>
        </g>
        <g class="tick" transform="translate(0, 238)">
          <path stroke="#000" d="M0,0L-6,0"></path>
          <text
            transform="translate(-9, 0)"
            fill="#000"
            visibility="false"
            dy="0.32em"
          >
            6
          </text>
        </g>
        <g class="tick" transform="translate(0, 178.50000000000003)">
          <path stroke="#000" d="M0,0L-6,0"></path>
          <text
            transform="translate(-9, 0)"
            fill="#000"
            visibility="false"
            dy="0.32em"
          >
            7
          </text>
        </g>
        <g class="tick" transform="translate(0, 118.99999999999997)">
          <path stroke="#000" d="M0,0L-6,0"></path>
          <text
            transform="translate(-9, 0)"
            fill="#000"
            visibility="false"
            dy="0.32em"
          >
            8
          </text>
        </g>
        <g class="tick" transform="translate(0, 59.499999999999986)">
          <path stroke="#000" d="M0,0L-6,0"></path>
          <text
            transform="translate(-9, 0)"
            fill="#000"
            visibility="false"
            dy="0.32em"
          >
            9
          </text>
        </g>
        <g class="tick" transform="translate(0, 0)">
          <path stroke="#000" d="M0,0L-6,0"></path>
          <text
            transform="translate(-9, 0)"
            fill="#000"
            visibility="false"
            dy="0.32em"
          >
            10
          </text>
        </g>
      </svg></d3fc-svg
    ></d3fc-group
  >
</div>
