<div id="container" class="chart xyline">
  <d3fc-group class="cartesian-chart" auto-resize=""
    ><div class="chart-label top-label"></div>
    <div class="x-label bottom-label">Discount</div>
    <div class="y-label left-label">Profit</div>
    <d3fc-svg class="svg-plot-area plot-area"
      ><svg preserveAspectRatio="none">
        <g class="multi">
          <g>
            <line class="gridline-y" stroke="#bbb"></line>
            <line class="gridline-y" stroke="#bbb"></line>
            <line class="gridline-y" stroke="#bbb"></line>
            <line class="gridline-y" stroke="#bbb"></line>
            <line class="gridline-y" stroke="#bbb"></line>
            <line class="gridline-y" stroke="#bbb"></line>
            <line class="gridline-y" stroke="#bbb"></line>
            <line class="gridline-y" stroke="#bbb"></line>
            <line class="gridline-y" stroke="#bbb"></line>
            <line class="gridline-y" 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>
            <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><path class="line" fill="none" stroke="#000"></path></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>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">0</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">0.10</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">0.20</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">0.30</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">0.40</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">0.50</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">0.60</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">0.70</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">0.80</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">0.90</text>
        </g>
      </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">−2,000</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">−1,800</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">−1,600</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">−1,400</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">−1,200</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">−1,000</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">−800</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">−600</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">−400</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">−200</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">0</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">200</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">400</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">600</text>
        </g>
      </svg></d3fc-svg
    ></d3fc-group
  >
</div>
