DEV Community

Cover image for How many <div> elements are needed to create the Chart component?
Soundar
Soundar

Posted on

How many <div> elements are needed to create the Chart component?

Hello Frontend folks! This question might be a little weird to you because you might have seen many Chart components that may be built with SVG or Canvas rendering.

So here is the question: First, is it possible to create a Chart component using a div element with CSS rendering? If so, then how many div elements are needed?

Okay, if you said more than 1, then this post might be curious to you. Yes, because I have created a set of Chart components including Line, Bar and Area chart with a single <div> element alone.

Please have a look at the SingleDivUI library:
https://singledivui.com/

Why?

While I try to explore the possibilities of CSS, I just end up with this. Not only a simple Chart, it also has a lot of options with more customization, again all done inside a single div. If you are more interested in this, then please check out the demos section:

https://singledivui.com/demos/line-chart/basic

GitHub

I wish you to please look into this and give your thoughts and suggestions. If you like this, then give a Star on GitHub:

https://github.com/soundar24/singledivui

Screenshot

simple chart component built with single div element

Happy coding :-) cheers…

Top comments (0)