The latest articles on DEV Community by Soundar (@soundar24). https://dev.to/soundar24 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1080929%2F3b7506c5-ebc4-4fee-8e39-5e1c6672c67d.jpeg https://dev.to/soundar24 en Soundar Thu, 11 May 2023 18:50:53 +0000 https://dev.to/soundar24/how-many-elements-are-needed-to-create-the-chart-component-15l https://dev.to/soundar24/how-many-elements-are-needed-to-create-the-chart-component-15l <p>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.</p> <p>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?</p> <p>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 <code>&lt;div&gt;</code> element alone.</p> <p>Please have a look at the <strong>SingleDivUI</strong> library:<br> <a href="https://singledivui.com/">https://singledivui.com/</a></p> <h2> Why? </h2> <p>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:</p> <p><a href="https://singledivui.com/demos/line-chart/basic">https://singledivui.com/demos/line-chart/basic</a></p> <h2> GitHub </h2> <p>I wish you to please look into this and give your thoughts and suggestions. If you like this, then <strong>give a Star on GitHub</strong>:</p> <p><a href="https://github.com/soundar24/singledivui">https://github.com/soundar24/singledivui</a></p> <h2> Screenshot </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--DcWSICJJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6w768a0dv5o85m03896.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--DcWSICJJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6w768a0dv5o85m03896.png" alt="simple chart component built with single div element" width="800" height="153"></a></p> <p><strong>Happy coding :-) cheers…</strong></p> javascript opensource css frontend