How to implement own UI widget in libGDX?

 shapeRenderer.begin(ShapeType.Line);
 shapeRenderer.setColor(1, 1, 0, 1);
 shapeRenderer.line(x, y, x2, y2);
 shapeRenderer.rect(x, y, width, height);
 shapeRenderer.circle(x, y, radius);
 shapeRenderer.end();

Here is an example for the shapeRenderer class. I think that tree is a dynamic, a background image wouldn't work.

So you need to come up with an object oriented design or use a recursive function to draw it. How do you store your data? Without further information, supplying you with code is impossible.

Also did you get that image in libgdx, and are you asking to only write words instead of numbers? If that's the case use bitmap font. To use bitmap font look at the first link.

Here are some links to help you.

https://github.com/libgdx/libgdx/wiki/Gdx-freetype

https://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/glutils/ShapeRenderer.html

People might hate me for this (Not the most optimized idea, but still easy):

You can create an image without the numbers/names, just the lines, load it as background image, then write your text (Doesn´t matter if numbers or letters) in the desired position.

yourGame.font.draw(yourBatch, yourString, x, y);

(Take into account the resolution of the image if you want your app to work on different devices)