I am making a graph using an <svg> element. Some data needs to be added dynamically with Javascript. I got a simplified version of my problem here on JsFiddle.

What I am doing is getting an element by it's id. Then I create the new text element and set the attributes and innerHTML. Lastly, I am appending it to the <svg>.

The strange thing is that when I inspect the svg element in the console, it appears as if the element that is added with Javascript is there. However, it is not visible on the screen:

My code:

HTML

<svg>
    <g id="x_label">
        <text x="20" y="20">asd</text>
    </g>
</svg>

Javascript:

window.onload = () => {
  printChart()
}

function printChart() {
  let xLabel = document.getElementById('x_label')
  let newLabel = document.createElement("text")
  newLabel.setAttribute("x", "20")
  newLabel.setAttribute("y", "40");
  newLabel.innerHTML = "new label"
  xLabel.appendChild(newLabel)
}