I'm currently working on a donut chart in StackBlitz, the link to which can be found here.
My goal is to create gaps between each circle segment of the SVG donut chart to improve accessibility and make it easier to distinguish different parts of the chart.
Any assistance or advice on achieving this would be highly valued.
For reference, I have included comparison screenshots of the expected outcome versus the current state:
While experimenting with the svg attributes, I stumbled upon a solution that may benefit you. The fix is fairly straightforward - just make a simple change to the following line.
[attr.stroke-dasharray]="
item.utilization + ' ' + (100 - item.utilization)
"
[attr.stroke-dasharray]="
item.utilization - 1 + ' ' + (100 - item.utilization + 1)
"
I attempted to fork your stackblitz for a functional version link, but it seems stuck loading
Edit:
Upon further consideration, the initial approach doesn't align well with how dash-array and -offset function.
The issue with the first method is that you subtract a fixed amount from a percentage. This only works if the percentage (item.utilization) is higher than that specific amount. Additionally, this distorts the visual representation of the chart as it no longer accurately reflects the actual percentage.
A more effective approach is to base your chart on 100 + x percent (x representing the elements in your chart), such as 105. This allows for greater spacing within the chart. Utilize the dash-offset to shift the individual items based on their index.
[attr.stroke-dasharray]="(item.utilization) + ' ' + (105 - item.utilization)"
[attr.stroke-dashoffset]="
i === 0 ? 25 : (105 - item?.runningTotal + 25 - i)
"
By using 105, a significant gap becomes apparent. To decrease this gap, consider utilizing 102.5 and i / 2. Remember to adjust the percentage by the number of elements in your chart since each element accounts for 1% (or 0.5% respectively) of the extra space provided.
Edit2: You can leverage donutData.length to incorporate additional space.
[attr.stroke-dasharray]="(item.utilization) + ' ' + (100 + donutData?.length / 2 - item.utilization)"
[attr.stroke-dashoffset]="
i === 0 ? 25 : (100 + donutData?.length / 2 - item?.runningTotal + 25 - i/2)
"I'm struggling to figure out how to display the column names from a JSON file. Currently, all the column names are being displayed in one column, and empty fields are showing up for some reason. How can I format it so that the column names are listed ...
After creating and opening my Sqlite database and saving the SQLiteObject in a variable within my app.component.ts, I now need to retrieve these attributes in my custom ORM. The ORM extends to other providers to describe the title and field of my tables. ...
I have a situation where one of my web pages contains a DIV element with text inside, set at 1.1em size. Here's an example: <div id="displaydiv"> <b>Hello World</b> </div> On another page, I have the same DIV element but ...
Hey there, I'm looking to create a 3x3 grid of checkboxes in a pop-up window. I found a similar example here: https://codepen.io/webdevjones/pen/qBapvrz. I tried using display: flex, but I'm unable to get the checkboxes in a grid format and the l ...
My form allows users to input their data, but once submitted, the form becomes read-only. However, I'm facing an issue where the data in the text area is not scrollable even though it should be. I need assistance in figuring out why the content in th ...
Currently, I'm developing a whack-a-mole game using javascript/jQuery. My goal is to allow users to drag the mole holes to their desired positions on the screen and then click start to begin playing (with moles popping out of the holes). However, I am ...
I am having trouble organizing this layout with CSS and using floats on the divs. The layout consists of standard sized boxes, a large box, and a tall box. Here is the link to the jsfiddle for reference. Here is the markup I am working with - <head> ...
After implementing the ng-drag and drop npm module with the draggable directive, I encountered an issue while trying to display a list of items from a 2D array using li elements. Since multiple ngFor's are not allowed in Angular, I needed to come up w ...
I have a series of div elements, each containing a button. When I click on a button, text is displayed, and when I click away, the information hides with a focus-out function. If I have one button open and then want to click on another parent button, it wo ...
Attempting to utilize Typescript typings for the Youtube Data API found at: https://github.com/Bolisov/typings-gapi/tree/master/gapi.client.youtube-v3 Within the Ionic framework, an error is encountered after running 'Ionic Serve' with the follo ...
Currently, I am attempting to create a clickable image within an unordered list. Although the paragraph is clickable, unfortunately, the image itself is not responding as expected. <ul> <a href="/movies/test/"><li> ...
Check out this page for guidance on adding a div with a button click in AngularJS: How to add div with a button click in angularJs I attempted to create an angular directive that should add a div to my HTML page when a button is clicked. However, upon cli ...
After tirelessly searching for a solution, I came across some answers that didn't quite fit my needs. I have multiple <span id="same-id-for-all-spans"></span> elements, each containing an <img> element. Now, I want to create a print ...
I currently have a table structured as follows: <table class="cedvel"> <caption> count: <%:Html.Encode(TempData["RowsCount"])%></caption> <thead> <tr&g ...
I'm attempting to place text beside the circular shape. HTML <div class="row"> <div class="col-sm-2"> <span><div class="circle"></div></span><p>available</p> </div> </div> C ...
I recently updated my Angular app to make it accessible to customers by switching from ADAL to MSAL for authentication. I configured the app with Azure AD B2C credentials and everything seems to be working smoothly, except for one issue. When I try to logi ...
I have a dilemma regarding the spacing between two hyperlinks within a div tag. Can anyone advise on how to create this space effectively? .btn-filter { background-color: #ffffff; font-size: 14px; outline: none; cursor: pointer; height: 40px ! ...
Struggling to make sure all columns in Bootstrap 3 are the same height throughout the page? If you've managed to achieve this with 3 columns, like the example provided here, great job! However, the challenge arises when dealing with nested columns t ...
I apologize if this question has already been addressed, but I have been unable to find a solution that works for my specific issue. My Gallery consists of a side list of available images in one section, which when clicked changes the image source in anot ...
Looking to scale up the elements on an HTML page by 50%, without affecting the resolution of images. Despite trying zoom: 150% in CSS3, it ends up zooming pictures as well, resulting in blurry visuals. Is there a way to enlarge all HTML components while ...