Linear gauge

Written byPhuoc Nguyen

Created

20 Nov, 2023

#Setting up the layout

Setting up a layout for a simple linear gauge can be done with just one element that represents the progress.

html

<div class="gauge">
    <div class="gauge__progress"></div>
</div>

In order to position the progress indicator inside the gauge, we need to use absolute positioning. First, we set the `position` property of the gauge container to `relative`, so that any child elements with absolute positioning are positioned relative to it.

Next, we set the position property of the progress indicator to `absolute`, and give it a `top` and `left` value of 0. This will position it at the top left corner of the gauge container. Finally, we set the `width` of the progress indicator to a percentage value based on the current value being displayed. This will cause it to stretch or shrink horizontally as needed.

css

.gauge {
    position: relative;
}

.gauge__progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
}

Setting different background colors for the gauge and progress indicator can make it easier to distinguish between the two elements, improving the gauge's readability. By using contrasting colors, we can highlight the progress indicator and make it stand out against the gauge's background. This is especially helpful when displaying data with a wide range of values or when there are multiple gauges on a single page. Moreover, choosing visually appealing colors can enhance the gauge's overall look and feel, making it more engaging for viewers to interact with.

css

.gauge {
    background: rgb(203 213 225);
}
.gauge__progress {
    background: rgb(99 102 241);
}

Here's what the gauge looks like:

#Adding ticks to the linear gauge

To make your linear gauge more informative, it's important to include ticks. Ticks provide visual markers that indicate specific points on the gauge and help users understand where they are on the scale.

In this example, we add five ticks between 0 and 100 percent, representing key milestones along the way. This makes it easier for users to quickly gauge their progress and understand their current position.

html

<div class="gauge">
    <div class="gauge__tick" style="left: 0%;"></div>
    <div class="gauge__tick" style="left: 25%;"></div>
    <div class="gauge__tick" style="left: 50%;"></div>
    <div class="gauge__tick" style="left: 75%;"></div>
    <div class="gauge__tick" style="left: 100%;"></div>
</div>

To add ticks to a gauge, we use absolute positioning and set the `left` property to a percentage value based on where we want the tick to appear. For example, to add a tick at the 25% mark, we set `left` to 25%. The tick is then positioned at that point on the gauge.

We can adjust the height of each tick using the `height` property and set the `width` to 1px to create a thin vertical line. By default, the tick color matches the gauge container, but we can customize it with CSS to create a more visually appealing and informative gauge.

By adding ticks to a gauge, we can provide viewers with additional information about the data being displayed. We can also use different colors or styles for each tick to make the gauge easier to read and interpret.

css

.gauge__tick {
    position: absolute;
    top: 100%;
    height: 0.5rem;
    width: 1px;
    background: rgb(203 213 225);
}

We can make our gauge even more informative by adding smaller ticks, also known as minor ticks, to the axis. We can insert three minor ticks between each major tick by placing them at a percentage value that falls between two adjacent major ticks. This provides more detailed information on the range of values displayed and helps viewers understand the gauge better.

html

<div class="gauge">
    <div class="gauge__tick gauge__tick--minor" style="left: 5%;"></div>
    <div class="gauge__tick gauge__tick--minor" style="left: 10%;"></div>
    <div class="gauge__tick gauge__tick--minor" style="left: 15%;"></div>
    ...
</div>

To make it easier for viewers to distinguish between major and minor ticks, we can use a separate CSS class and adjust its height to make it smaller than the main ticks. This way, viewers can understand the ticks correctly and avoid any confusion.

css

.gauge__tick--minor {
    height: 0.25rem;
}

Check out the demo below to see how even small changes can make a big difference with ticks.

#Enhancing the linear gauge with labels

We can make the linear gauge even more informative by adding labels to indicate specific values along the gauge. Labels can be used to show the current value of the progress indicator or to mark important milestones on the gauge.

To add a label, we simply create a new element inside the tick element, give it a class name, and set its content to the value we want to display. With this simple addition, our linear gauge becomes even more useful and visually appealing.

html

<div class="gauge">
    <div class="gauge__tick" style="left: 50%;">
        <div class="gauge__label">50</div>
    </div>
    ...
</div>

In this example, we've added a label to the gauge at the 50% mark. To position the label, we use absolute positioning and set its `left` property to 50%. This centers the label horizontally within the tick element. To center the label vertically, we use the `transform` property to move it up by a quarter of the tick's height. By combining these CSS properties, we can create labels that show data in real-time and give viewers more information about the values being displayed. We can also use different colors or styles for each label to make the gauge more visually appealing and easy to read.

css

.gauge__label {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0.25rem);
}

Customizing the appearance of our labels can help make them more visually appealing for viewers. By adjusting properties like font size and color, we can create a polished and professional look for our linear gauge.

By combining ticks, labels, and other design elements, we can create a visualization that effectively communicates important information to viewers in an engaging and informative way.

By changing the position from `left` to `top`, we can easily create a horizontal gauge as follows:

#Conclusion

CSS and HTML give us the power to create linear gauges that are not only informative but also visually appealing. By adding ticks and labels to our gauge, we can provide more context for viewers to easily interpret the data in real-time. Customizing the colors and styles of our gauge elements can create a more engaging user experience that encourages viewers to interact with the data. Overall, CSS and HTML offer a robust toolkit for creating effective linear gauges that communicate important information clearly and concisely.

#See also

Create a linear gauge with discrete values

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn

Linear gauge

#Setting up the layout

#Adding ticks to the linear gauge

#Enhancing the linear gauge with labels

#Conclusion

#See also

Questions? 🙋

Recent posts ⚡

Newsletter 🔔