simple barchart and axis are side by side. SVG graph-CodePudding

I have a stacked bar chart in the below codepen https://codepen.io/a166617/pen/qBXvzQd

As you can see the codepen, it doesn't show graph on x-axis and y-axis line. barchart slides away to the right. Can someone please let me know how to put barchart on the x-axis and y-axis of graph?

<g class="grid x-grid" id="xGrid">
  <line x1="90" x2="90" y1="5" y2="371"></line>
</g>
<g class="grid y-grid" id="yGrid">
  <line x1="90" x2="705" y1="370" y2="370"></line>
</g>

The code to achieve the line for the x-axis and y-axis is as follows. But somehow the graph does not show up on the line axis. Can someone please guide me where I am going wrong?

CodePudding user response：

The way I would solve this is by using css positioning. I've added some additional code on your codepen. It's viable if your graph has static values. Check it out here. I've added this custom class on the div that contains the bars and title.

.mGraph > svg {
  position: relative;
  left: -40rem;
  top: -.65rem;
}

.mGraph > div {
  position: relative;
  left: -40rem;
  top: -.65rem;
}

.mGraph > text {
  position: relative;
  left: -50rem;
}