Creating inner borders on a pie chart with HTML and CSS: A step-by-step guide

Question

Creating inner borders on a pie chart with HTML and CSS: A step-by-step guide

After putting my coding skills to the test, I successfully crafted a stunning pie chart using only HTML and CSS.

https://i.sstatic.net/5xCbl.png

Here's the code snippet I tinkered with:

HTML -

<div class="pie-chart"></div>

CSS -

.pie-chart {
        margin-left: 10px;
        --size: 8rem;
        --fg: #369;
        --bg: #def;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        display: grid;
        place-items: center;
        background:
          radial-gradient(closest-side, white 40%, transparent 0 99.9%, white 0),
          conic-gradient(
            #301B84 0 45%,
            #715fa5 45% 65%,
            #aca6cd 65% 75%,
            #d6d0e4 75% 100%);
        color: var(--fg);
      }

I am striving for the eye-catching look of this pie chart, particularly focusing on creating that inner white border which adds an extra touch of elegance:

https://i.sstatic.net/uqmRh.png

However, please keep in mind that I am strictly limiting myself to HTML and CSS alone, without incorporating jQuery or Javascript. Can anyone offer assistance in accomplishing this task?

html css scss-mixins scss-lint

Answer 1

Answer №1

Conic gradients operate in angular segments, but introducing white spaces between each segment would create a thinner center and wider edges, which may not be the desired effect.

Therefore, there are two possible solutions:

Solution 1: Utilize SVG, as it is well-suited for this purpose and still falls within the HTML and CSS requirements. There are numerous tools and guides available.

Solution 2: Incorporate divider elements into your chart. While somewhat of a workaround, it can effectively address the issue. Here's an example: https://codepen.io/davidleininger/pen/abKJOOo/699fb1595f469e69054e36b27280344a

In essence, update your HTML to include dividers with a CSS custom property, then use these properties to generate divider lines within your chart:

<div class="pie-chart">
  <div class="divider" style="--precent: 45;"></div>
  <div class="divider" style="--precent: 65;"></div>
  <div class="divider" style="--precent: 75;"></div>
  <div class="divider" style="--precent: 100;"></div>
</div>

Once dividers are added to your HTML, apply the following CSS code to achieve the divider lines:

.pie-chart .divider {
  background: white;
  height: 50%;
  left: 50%;
  margin-left: -1px;
  position: absolute;
  top: 0;
  transform-origin: 0 100%;
  transform: rotate(calc(1turn * (var(--precent) / 100)));
  width: 2px;
}

The key component here is the transform property, responsible for positioning and rotating all divider lines accordingly.

Answer 2

Conic gradients operate in angular segments, but introducing white spaces between each segment would create a thinner center and wider edges, which may not be the desired effect.

Therefore, there are two possible solutions:

Solution 1: Utilize SVG, as it is well-suited for this purpose and still falls within the HTML and CSS requirements. There are numerous tools and guides available.

Solution 2: Incorporate divider elements into your chart. While somewhat of a workaround, it can effectively address the issue. Here's an example: https://codepen.io/davidleininger/pen/abKJOOo/699fb1595f469e69054e36b27280344a

In essence, update your HTML to include dividers with a CSS custom property, then use these properties to generate divider lines within your chart:

<div class="pie-chart">
  <div class="divider" style="--precent: 45;"></div>
  <div class="divider" style="--precent: 65;"></div>
  <div class="divider" style="--precent: 75;"></div>
  <div class="divider" style="--precent: 100;"></div>
</div>

Once dividers are added to your HTML, apply the following CSS code to achieve the divider lines:

.pie-chart .divider {
  background: white;
  height: 50%;
  left: 50%;
  margin-left: -1px;
  position: absolute;
  top: 0;
  transform-origin: 0 100%;
  transform: rotate(calc(1turn * (var(--precent) / 100)));
  width: 2px;
}

The key component here is the transform property, responsible for positioning and rotating all divider lines accordingly.

Creating inner borders on a pie chart with HTML and CSS: A step-by-step guide

Answer №1

Similar questions

Encountered issue while initializing object from controller in AngularJS

When viewed on a mobile device, the page defaults to displaying the NumPad instead of the Text Keyboard in Angular

Table does not have appropriate rowspan and colspan attributes

How can I feature an image at the top of the page with large 3 and jQuery in FireFox?

Accessing stored web pages / Browser as an interactive interface

Uncertainty surrounding the application of class selector within CSS

In NextJs SSR, external components from a different package do not inherit styles when applied

What is the reason for the presence of white space surrounding the div element

What could be the reason for Internet Explorer pulling styles from the media=print CSS?

How can I execute a function when ng-click is triggered on an <a> tag, and ensure it opens in a new tab?

Using the .val method on an input element modifies the HTML content without affecting the value displayed

Is the XPath in Selenium executed against the Document Object Model (DOM) or the HTML file

CSS Challenge: How to crop an image without using its parent container directly

What steps can I take to ensure my CSS component remains unaffected by the global CSS styles?

Steps to alter background image and adjust its height upon function activation

I require fixed headers that no longer stick once reaching a specific point

What is the best way to save a JavaScript array in HTML5 local storage?

Unexpected symbols appearing in image tag after AJAX response

Struggling to locate the src/site/globals/site.variables file to customize the font-family in Semantic UI React. Is there an alternative method to achieve this?

AngularJS 1: Dynamically updating input values in real-time