Circle that is hollow and divided into segments based on percentage colors

I am currently working on creating a hollow graph circle where each division corresponds to a specific percentage.

Issue: The three colors forming the circle should occupy a certain percentage of the circle. For example, if color 1 = 33%, color 2 = 33% and color 3 = 33%, then the circle should display these colors in equal proportions. At the moment, the circle does not accurately represent the percentage division of colors. Any assistance on this matter would be greatly appreciated.

UPDATE: Is it possible to achieve this using HTML canvas?

.a{
    margin: 0;
    width: 90px;
    text-align: center;
    height: 90px;
    border-radius: 50%;
    border: 4px solid transparent;
    background-size: 100% 100%, 50% 50%, 50% 50%;
    background-repeat: no-repeat;
    background-image: linear-gradient(white, white), 
                    linear-gradient(30deg, rgb(240,120,16) 100%, lightgrey 0%),
                    linear-gradient(120deg, rgb(127,127,127) 100%, lightgrey 0%),
                    linear-gradient(310deg, rgb(255,192,0) 100%, lightgrey 0%);
    
    background-position: center center, left top, right top, left bottom, right bottom;
    background-origin: content-box, border-box, border-box, border-box, border-box;
    background-clip: content-box, border-box, border-box, border-box, border-box; 
}
<div class="a"></div>

javascripthtmlcss

Answer №1

You can make adjustments to the code like this:

.a{
    margin: 0;
    width: 90px;
    text-align: center;
    height: 90px;
    border-radius: 50%;
    background-size:50% 100% ,100% 50%,100% 100%;
    background-position:100% 0,0 100%,0 0;
    background-repeat: no-repeat;
    background-image:
    linear-gradient(33deg,transparent 37%, green 0),     
    linear-gradient(-33deg, red 70%, blue 0%),     
    linear-gradient(to right, blue 50%, green 50%);
    position:relative;
}
.a:before {
  content:"";
  position:absolute;
  top:5px;
  right:5px;
  left:5px;
  bottom:5px;
  background:#fff;
  border-radius:50%;
}
<div class="a"></div>

It is also recommended to use SVG or more precise tools for creating charts like this. Here's an example using SVG:

.pie {
  width: 100px;
}

.pie circle {
  fill: none;
  stroke-width: 4;
  stroke-dasharray:55 110
}
<svg viewBox="0 0 64 64" class="pie">
  <circle r="40%" cx="50%" cy="50%"  stroke="red">
  </circle>
  <circle r="40%" cx="50%" cy="50%"  stroke=" green" stroke-dashoffset=" -55">
  </circle>
  <circle r="40%" cx="50%" cy="50%" stroke="blue" stroke-dashoffset="-110">
  </circle>
 
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to redirect to a webpage by clicking on an image without relying on anchor tags

Is it possible to redirect to a new webpage without using an anchor tag when someone clicks on an image? Below is my code for the image. <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/368px-Google_2015_l ...

javascripthtmljquerycss

What is the best way to design versatile div containers that combine the float property with fluid dimensions?

I am attempting to achieve a specific layout where the width of the content_container extends up to the right side of the screen and dynamically adjusts based on whether the expandable pane is collapsed or expanded. Applying width: 100% to .content_contain ...

javascripthtmljquerycss

I am currently experiencing difficulties with loading files in Magento even though they are present on the server

I am experiencing difficulties with a Magento 1.5.1 installation that was not a fresh setup, but rather one that was transferred to another server (files and database copied over). The issue I am facing is related to the failure of my Javascript files to ...

javascriptjquerymagentoe-commerce

Node.js frequently returns null with its url methods

I'm having some trouble getting node.js to display the HTTP request properties in the browser. I've tried printing the properties of the request URL, but they either show up as null or don't display at all. Below is the code for the server ( ...

javascriptnode.js

The route on Heroku is functional when tested locally, but encounters issues when deployed in production

I have recently deployed a node project to a Heroku app successfully. However, I am encountering a "Cannot GET" error (404) on one specific route while other routes on the same page are functioning as expected. This issue only occurs when accessing the rou ...

javascriptnode.jsexpressheroku

Tips for implementing JavaScript or jQuery to enable page transitions in a single-page website

Currently, I am in the process of developing a website that encompasses both front-end and back-end elements. One challenge I am facing involves figuring out how to utilize JavaScript/jQuery to transition between pages within a single-page website. The ta ...

javascriptphpjqueryajax

Converting from Async.js parallel to Bluebird: A Step-by-Step Guide

Utilizing async.js allows me to define promises with handlers, providing polymorphism and separating results. Can this be achieved in bluebird as well? async.parallel({ cityPromises: (cb)=>{ City.find({ ...

javascriptnode.jsbluebirdasync.js

Table with expansive width housed in a div container but the div container fails to

How can I make a parent div expand when the child table exceeds the page width? What is the most effective CSS approach to achieve this? ...

htmlcssxhtml

What is the method for modifying the input element within a TextField component from MUI?

I have TextField elements in my application that appear to be too large. Upon inspection, I noticed that the input element within them has default padding that is too big.https://i.stack.imgur.com/C13hj.png My query is regarding how to adjust the styling ...

javascriptreactjsmaterial-ui

I'm encountering an issue with my React 18 application using TypeScript: the module './App' cannot be found

Encountering an issue while attempting to update to react 18. I'm curious if this problem is related to my file types. I am using Typescript, so do both the app and index files need to have a .tsx extension? Both the app and index files are located ...

javascriptreactjstypescriptcreate-react-appreact-18

Is there a way to individually invoke a function on every element within a webpage?

Every element in my database is accompanied by a distinct thumbnail for display purposes. To cater to user preferences, I have included a dropdown menu that triggers the display of different forms based on their selection through a function. However, my cu ...

javascriptjqueryhtmlnode.jshandlebars.js

JS: Issue with iterating over objects

Within my JavaScript code, there exists an object named box_object with the following structure: ({ id:"3", text:"this is a box object", connection_parent:["1", "2"], connection_child:["5", "6"], connectiondata_child:{ 0:{id:"5", ...

javascriptjqueryjavascript-objects

How can I create a unique visual effect on the background in frontend development using chipped design techniques?

Creating a static website utilizing React. Description I am looking to incorporate a visual effect into the website pages, similar to the one demonstrated below. visual effect The goal is to design a rectangular background with triangles cut out from it ...

cssreactjsgraph

Experiencing an "ENOTFOUND" error after attempting to make a large volume of API calls, possibly in the range of 100,000, to maps.google

I have a requirement to send a large number of requests to https://maps.googleapis.com/maps/api/place/queryautocomplete/json. Currently, I am fetching lists of strings from multiple files and sending requests to the mentioned API. When I test with 100 str ...

javascriptnode.jsconcurrencypromiseaxios

Updating Gmaps iFrame URL with AJAX

I am currently attempting to update the SRC of an iFrame by using a URL obtained via AJAX from the backend database. I want the maps to change when a button is clicked. An error message displayed inside the iFrame reads, "404. That’s an error. The reque ...

phphtmljsonajax

Utilizing the Ternary Operator for conditional rendering in React is causing issues with HTML elements

Why does React display the "signin" div when the user is not true, but displays the children of the "user-profile" div inside the "signin" div when the user is true? I have tried multiple solutions to fix this issue, but it persists. If anyone knows how t ...

javascripthtmlreactjsnext.js

After attempting to retrieve local .HTML content with JQuery ajax for the second time, the JavaScript code within index.html appears to be malfunctioning

My apologies for my limited proficiency in English... Currently, I am engaged in phonegap development where I am attempting to utilize JQuery ajax to retrieve local .HTML content and insert this extracted content into the div with the id="next-page" in in ...

jqueryhtmlajaxcordova

Concealing specific HTML elements with ng-view in AngularJS

I recently started a project in AngularJS and I'm utilizing ng-view with $routeProvider for templating. However, I've encountered a minor issue where I don't want the navbar to display on specific pages like the landing, login, and registrat ...

javascripthtmlcssangularjs

What is the best way to integrate a CSS file into Vue.js 2?

At the moment, I'm diving into Vue.js 2 but I've hit a roadblock. Can anyone advise me on how to incorporate external CSS in Vue.js 2? I would greatly appreciate any solutions you can offer. Thank you! ...

javascriptcssvue.jsvuejs2

Transferring data between Promises and functions through variable passing

I am facing a challenge. I need to make two separate SOAP calls in order to retrieve two lists of vouchers, and then use these lists to perform some checks and other tasks. I have placed the two calls within different Promise functions because I want to in ...

javascriptnode.jspromise