Adjust the Highcharts semi-pie design by eliminating the gap between the pie and the legend

I'm having trouble adjusting the spacing between the bottom of a semi circle donut chart in Highcharts and the legend below it. Despite my efforts, I have not been successful in reducing this gap.

Here is the basic chart I am currently working on:

https://jsfiddle.net/vmw0pekL/2/

Here is the current result:

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

Initially, I made adjustments to the chart properties such as marginTop and marginBottom to decrease the space between the chart and the legend. However, this resulted in a large gap at the top of the chart as seen here:

https://jsfiddle.net/vmw0pekL/3/

The updated result looks like this:

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

If anyone has any suggestions on how to address this issue, I would greatly appreciate it. I aim to eliminate the space at the top of the graph and minimize the gap between the graph and the legend as well.

javascripthtmlcsshighchartspie-chart

Answer №1

The reason for the large empty space beneath the semi-circle donut chart is due to it being reserved for the lower section of the complete pie chart. Adjusting the startAngle to 0 and endAngle to 360 will make this clearer. To customize this, modify the values in the center array and adjust the size of the pie accordingly.

For more information refer to the API Reference:
http://api.highcharts.com/highcharts/plotOptions.pie.center

Check out an example here:
https://jsfiddle.net/327uxkbt/

Answer №2

Here is a simple method to achieve the desired outcome:

style: {
    paddingTop: 20,
    paddingBottom: -120,
    paddingLeft: -80,
    paddingRight: -80
},

#wrapper {
  border: 2px solid blue;
  height: 280px;
  font-size: 10px;
  width: 400px;
}

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

Trouble obtaining AJAX result using onClick event

As a newbie to AJAX, I am still trying to grasp the concept. My task involves using an AJAX call to extract specified information from an XML file. Even after carefully parsing all tag elements into my JavaScript code, I encounter a problem when attempting ...

javascripthtmlcssajax

The Textfield component in Material UI now automatically sets the default date to the current date when using the "date" type

I am using Material UI's textfield with the type set to "date" and I'm experiencing an issue where the date defaults to the current date instead of mm/dd/yyyy. Is there a way to prevent this behavior and display mm/dd/yyyy when the user loads the ...

javascripthtmlreactjsreact-nativematerial-ui

Is there a way to unselect a button in Angular?

I have a set of buttons representing different categories. When I click on a button, it displays a card with relevant information. <app-category-button [label]='category.name' [isSelected]='category.id === (selectedCategoryId$ | asy ...

javascriptangularquery-string

In VueJS, the v-for directive allows you to access both parameters and the event object within

Imagine having nested elements that repeat using v-for in the following structure: <div id="container"> <div v-for="i in 3"> <div v-for="j in 3" v-on:click="clicked(i,j)"> {{i+&a ...

javascriptvue.jsdom-events

Here's a guide on how to retrieve the element type or tag type in Selenium using C#

Let's say we have a tag like this: <a class = "fp-anchor fp-forgot-password pull-right" href = "/Account/ForgotPassword">Forgot Password?</a> == $0 In order to determine the type of element, we need to identify if it is a hyperlink. For ...

c#jqueryhtmlselenium

The validation feature in 1000hz Bootstrap seems to be malfunctioning

I've been working on implementing validation using the 1000hz bootstrap validation plugin. Most things are going smoothly, but I'm encountering two issues: 1). The data-match attribute doesn't seem to be working even when I enter the same p ...

javascriptjquerytwitter-bootstrapvalidationemail

Verification - enter a unique key for each ajax call

As I develop a new app, I am aiming to separate the HTML/JS layer from the PHP layer in order to prepare for a potential phonegap version in the future. One major concern I have is regarding authentication. Since I won't be able to rely on session va ...

javascriptajaxauthentication

Display various messages when submitting a form based on Ajax technology

I have been working on a script that utilizes AJAX to process form submissions. While I can successfully submit the form using AJAX and display a success message, I am looking to customize the messages based on the background data processing of the form. ...

javascriptphpjqueryajax

Ways to unveil a concealed div element using JavaScript

If javascript is disabled, I want to hide a div. If javascript is enabled, however, I don't want to rely on using the <noscript> tag due to issues in Chrome and Opera. Instead, my approach is as follows: <div id="box" style="display:none"> ...

javascripthtmlcss

Begin your meteor project with a remote MongoDB server on a Windows operating system

Currently tackling a project that requires me to integrate my meteor project with a remote MongoDB server on Windows. I successfully set the environment variable (MONGO_URL="DB LINK") from OSX using terminal commands, but I'm encountering difficulties ...

javascriptnode.jsmongodbmeteor

What occurs when multiple HTML tags are assigned the same string as their ID attribute value?

While browsing a html page, I stumbled upon several tags that I thought had the same id. It turns out they were unique, but it got me thinking - what would happen if multiple tags actually shared the same id? I've always heard that the id attribute o ...

javascriptjqueryhtmlcross-browser

Adjust transparency according to the information extracted from the AnalyserNode

Currently, I am exploring ways to animate text opacity based on the volume of an audio file. While browsing online, I came across this specific codepen example, which showcases a similar concept. However, as I am relatively new to JavaScript, I find it ch ...

javascripthtmlcssaudio

Updating data from an ajax call in chart.js can be done with a few simple steps

I have successfully generated a graph using data from an ajax call in a php file. Now, I want to enhance this graph by allowing users to select a specific customer from a drop-down list (chg_customer) and display the corresponding count on the chart. Altho ...

javascriptphpajaxchart.js

Interacting with the DOM of an iFrame from a separate window using Javascript

My main webpage is hosted on "DomainA" and it contains an iFrame sourced from "DomainB". Within this iFrame, there is a click event that opens a new window, also sourced from "DomainB". I am attempting to update an input field within the iFrame from the n ...

javascriptsame-origin-policycross-domain-policy

Launching a bootstrap modal within another modal

I am facing a minor issue with two modal popups on my website. The first modal is for the sign-in form and the second one is for the forgot password form. Whenever someone clicks on the "forgot password" option, the current modal closes and the forgot pas ...

javascriptjquerytwitter-bootstrap

What's the best way to position an ion-label at the top of the stack

I'm having trouble creating an input label similar to the new Google style. However, when the label moves up, it gets cut in the middle as shown here. Despite trying to adjust the margin, padding, and Z-index, none of these solutions have resolved my ...

htmlcssangularionic-frameworksass

Adding a Timepicker to a Datepicker on a jsp webpage with javascript

I am working on a JSP page that includes a date picker. I want to enhance this datepicker by adding a start time and end time within the calendar itself. How can I achieve this? Additionally, I need to implement validation ensuring that the start time is a ...

javascriptjqueryjsptimepicker

Optimizing Google e2e testing using Protractor

Improving login efficiency is necessary to enhance the speed of executing e2e tests. At present, after every test, the Chrome browser shuts down, requiring a new login session for each subsequent test. What changes can be made to address this issue? Any ...

javascriptseleniumselenium-webdriverprotractore2e-testing

Align your content in the center of any browser

My CSS code is currently only centering on a certain type of screen, but I want it to be centered on any screen. Here is the CSS code: @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed); html{ font-family: "HelveticaNeue-Light" ...

htmlcss

How can DataTables (JQuery) filter multiple columns using a text box with data stored in an array?

I've been attempting to create a multi-column filter similar to what's shown on this page () using an array containing all the data (referred to as 'my_array_data'). However, I'm facing issues with displaying those filter text boxe ...

javascriptjquery