Photo by Clay Banks on Unsplash

REACT DEVELOPMENT

How to Write Your Own Percent Stacked Bar

In this article, I want to tell you how to write your own Horizontal StackBar with div and CSS. Without using any Chart Library.

Sometimes in tables or lists, we want to show ingredient parts of an element with ratios and different colors.

You can look at the sample link to see this demo;

• https://onurdayibasi.dev/percent-stacked-bar

First, we must design what we develop.

Parts of Horizontal Stacked Bar

Then define parts are divs that have different widths and colors. Below code construct an array which holds percent piece of stacks.

Define Percent Piece of Stacks which has Id, Text, StartPosition, Width, and Color

After constructing parts structures, we will render this div with giving different prop parameters.

Render Percent Piece.

At last, we define Tooltip will only display with mouse hover. To implement this feature, you can use Material UI PopOver API, Semantic React Popup, or ReactJS Popup. But all of them need div wrapping and handling mouse events. It's not native, and all of them use extra JavaScript logic.

Mouse Over Display

So I decided to use CSS Capability. I applied a similar code at that link

CSS Hovering Capability

Let's continue reading 😃

You can find similar samples and writings at this link. If you like this story. Please 👏👏 and share