Creating Responsive CSS and HTML Arc Charts

Table of Contents

1. Fundamental Concepts
   • What are Arc Charts?
   • Responsive Design Basics
2. Usage Methods
   • HTML Structure for Arc Charts
   • CSS Styling for Responsive Arc Charts
3. Common Practices
   • Using Percentages for Sizing
   • Media Queries for Different Screen Sizes
4. Best Practices
   • Accessibility Considerations
   • Performance Optimization
5. Code Examples
6. Conclusion
7. References

Fundamental Concepts

What are Arc Charts?

Arc charts are circular visualizations that display data as segments of a circle. Each segment represents a proportion of the whole. They are similar to pie charts, but often have a hole in the center, creating a donut - like appearance. Arc charts are useful for showing relative proportions of different categories within a dataset.

Responsive Design Basics

Responsive design is an approach to web design that ensures web pages look and function well on a variety of devices, including desktops, tablets, and mobile phones. Key principles of responsive design include using flexible grids and layouts, media queries, and flexible images. When applying these principles to arc charts, we need to make sure the chart resizes and remains legible across different screen sizes.

Usage Methods

HTML Structure for Arc Charts

To create an arc chart, we can use basic HTML elements. A simple approach is to use <div> elements to represent the different segments of the chart. Here is a basic example:

<div class="arc-chart">
    <div class="arc-segment" style="--arc-percentage: 30;"></div>
    <div class="arc-segment" style="--arc-percentage: 70;"></div>
</div>

In this example, we have a parent <div> with the class arc - chart and two child <div> elements representing the segments of the arc chart. The --arc - percentage custom property is used to define the proportion of each segment.

CSS Styling for Responsive Arc Charts

We can use CSS to style the arc chart and make it responsive. Here is an example of CSS code:

.arc-chart {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: lightgray;
    margin: 0 auto;
    /* Make it responsive */
    width: 50vw;
    height: 50vw;
    max-width: 300px;
    max-height: 300px;
}

.arc-segment {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    clip: rect(0, 100px, 200px, 0);
    transform: rotate(calc(var(--arc-percentage) * 3.6deg));
}

.arc-segment:nth-child(1) {
    background: blue;
}

.arc-segment:nth-child(2) {
    background: red;
}

In this CSS code, we first style the arc - chart container to make it a circle using border - radius: 50%. We also set the width and height to be responsive using vw units and limit the maximum size. The arc - segment elements are positioned absolutely within the chart and rotated based on the --arc - percentage custom property.

Common Practices

Using Percentages for Sizing

When creating responsive arc charts, it is important to use percentages or relative units like vw and vh for sizing. This ensures that the chart resizes proportionally as the screen size changes. For example, instead of setting a fixed width and height for the chart, we can use percentages or viewport units as shown in the CSS code above.

Media Queries for Different Screen Sizes

Media queries can be used to adjust the styling of the arc chart based on the screen size. For example, we can change the size of the chart or the font size of any labels when the screen is smaller.

@media (max-width: 600px) {
    .arc-chart {
        width: 80vw;
        height: 80vw;
    }
}

In this media query, when the screen width is less than or equal to 600px, the width and height of the arc chart are set to 80% of the viewport width.

Best Practices

Accessibility Considerations

• Semantic HTML: Use appropriate HTML elements and add ARIA (Accessible Rich Internet Applications) attributes to make the chart accessible to screen readers. For example, we can add role="img" to the arc - chart container and aria - label to describe the data represented by the chart.
• Color Contrast: Ensure that there is sufficient color contrast between the segments of the chart and the background to make it easy to distinguish for users with visual impairments.

Performance Optimization

• Minimize DOM Manipulation: Avoid excessive use of JavaScript for animating or updating the arc chart, as it can impact performance. Instead, rely on CSS transitions and animations.
• Optimize Images: If you are using any images in conjunction with the arc chart, make sure they are optimized for the web to reduce loading times.

Code Examples

Here is the complete code example combining the HTML and CSS:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .arc-chart {
            position: relative;
            width: 50vw;
            height: 50vw;
            max-width: 300px;
            max-height: 300px;
            border-radius: 50%;
            background: lightgray;
            margin: 0 auto;
        }

       .arc-segment {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            clip: rect(0, 50%, 100%, 0);
            transform: rotate(calc(var(--arc-percentage) * 3.6deg));
        }

       .arc-segment:nth-child(1) {
            background: blue;
        }

       .arc-segment:nth-child(2) {
            background: red;
        }

        @media (max-width: 600px) {
           .arc-chart {
                width: 80vw;
                height: 80vw;
            }
        }
    </style>
</head>

<body>
    <div class="arc-chart">
        <div class="arc-segment" style="--arc-percentage: 30;"></div>
        <div class="arc-segment" style="--arc-percentage: 70;"></div>
    </div>
</body>

</html>

Conclusion

Creating responsive arc charts using CSS and HTML is a great way to visualize data on the web. By understanding the fundamental concepts, using the right HTML and CSS techniques, and following common and best practices, we can create engaging and accessible arc charts that work well on a variety of devices. Remember to focus on responsiveness, accessibility, and performance optimization to provide the best user experience.

References

• MDN Web Docs - https://developer.mozilla.org/
• CSS Tricks - https://css-tricks.com/
• W3Schools - https://www.w3schools.com/

• ←Previous
• Next→