What is the best way to position a semi-circular donut graph in the center?

I am attempting to showcase a doughnut or semi-circle chart within a materialize card, which is a responsive div element.

My goal is to present simple data and utilize the chart as a progress bar. I took inspiration from the example provided in the HighCharts documentation.

Currently, I am facing an issue with positioning the plot at the bottom while eliminating the excess white space at the top. If I set the position at center: [50%, 50%], there appears to be an empty space at the bottom of the container.

Is there a way to adjust the height of the container without distorting the aspect ratio?

Below is the code snippet I am using:

var data = [  
{  
    name: 'Done',  
    y: 76.1,  
    color: "#ff6666",  
    dataLabels: {  
      enabled: false  
    }  
  },  
  {  
    name: 'To do',  
    y: 23.9,  
    color:"#dddddd",  
    dataLabels: {  
      enabled: false  
    }  
  }  
];  

Highcharts.chart('container', {  
  chart: {  
    plotBorderWidth: 0,  
    height: "400px"  
  },  
  title: {  
    text: 'Title'  
  },  
  tooltip: {  
    pointFormat: '<b>{point.percentage:.1f}%</b>'  
  },  
  plotOptions: {  
    pie: {  
      dataLabels: {  
        enabled: true,
        distance: -50,  
        style: {fontWeight: 'bold', color: 'white'}  
      },  
      startAngle: -90,  
      endAngle: 90,  
      center: ['50%', '100%']  
    }  
  },  
  series: [{type: 'pie', name: 'Value', innerSize: '70%', data: data}]  
});

Here is the current output I am seeing:

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

javascriptcsshighcharts

Answer №1

To achieve the desired dimensions for your chart, you may want to experiment with adjusting the container height, plotOptions.pie.center, and plotOptions.pie.size. Below is the modified code where I changed the chart height to 200px, set the center to ['50%', '70%'], and added a size of 200%.

Check out the updated sample code here: https://codepen.io/anon/pen/pGVyQX?&editable=true

var data = [  
{  
    name: 'Done',  
    y: 76.1,  
    color: "#ff6666",  
    dataLabels: {  
      enabled: false  
    }  
  },  
  {  
    name: 'To do',  
    y: 23.9,  
    color:"#dddddd",  
    dataLabels: {  
      enabled: false  
    }  
  }  
];  

Highcharts.chart('container', {  
  chart: {  
    plotBorderWidth: 0,  
    height:"200px"
  },  
  title: {  
    text: 'Title'
  },  
  tooltip: {  
    pointFormat: '<b>{point.percentage:.1f}%</b>'  
  },  
  plotOptions: {  
    pie: {  
      dataLabels: {  
        enabled: true,
        distance: -50,  
        style: {fontWeight: 'bold', color: 'white'}  
      },  
      startAngle: -90,  
      endAngle: 90,  
      center: ['50%', '70%'],
      size: "200%"
    }  
  },  
  series: [{type: 'pie',name: 'Value',innerSize: '70%',data: data}]  
});

Answer №2

When creating a Highcharts chart, it is important to understand that it is made up of various HTML elements. One key aspect is the height option, which allows you to set the height style for a child element within the HTML container that serves as your chart.

If you are encountering issues with the chart's height, one solution is to set different heights using CSS and JavaScript:

CSS:

#container {
    height: 200px;
    ...
}

JS:

chart: {
    height: 400
},

series: [{
    type: 'pie',
    name: 'Value',
    innerSize: '70%',
    center: ['50%', '50%'],
    data: data
}]

Check out a live demo here.

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

How to implement scroll spy in Bootstrap 4 to highlight parent li elements?

I have a bootstrap4 menu set up like this: <ul class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link" href="#introduction">INTRODUCTION <span class="sr-only">(current)</span></a></li> </ul> Th ...

javascriptbootstrap-4

Display a partial form in Rails using Ajax

There is a form displayed in the image below: Next, I aim to render this partial from an ajax call, specifically from .js.erb. However, I am unsure how to pass an object to f from the partial. Take a look at the image below for reference: Is there a way ...

javascriptruby-on-railsajax

Having an issue with the Show/Hide Javascript toggle on the same page. Multiple hidden texts are appearing simultaneously. Seeking a solution without the use of JQuery

This code is functioning efficiently. I am looking for a way to display and conceal various texts using different expand/hide links within multiple tables on the same page. I prefer to achieve this without using JQuery, just like in this straightforward sc ...

javascripthtmltogglehideshow

Don't use onchange() in place of keyup()

Issue: I am facing a problem where the keyup() function is calling ajax multiple times with each key press, and I have tried using onChange() but it did not work as expected. Here is the code to check if an email already exists in the database: $.noConf ...

javascriptjqueryajax

Whenever I refresh my website after deployment, I encounter an empty error using the MERN stack

Here is a question I previously posted: How can I properly use the res.sendFile for my MERN APP, as I encounter an error every time I refresh, and it was resolved there. I encountered a similar issue here, even after following the same steps that worked b ...

javascriptreactjsapideploymentmern

The transparent DIV/waiting message may not be displayed in IE10

Here is a DIV container that serves as a transparent background with a loading message. This is the HTML code for the DIV container: <div id="generatingexcel" style="display:none; position: fixed; width: 100%;height: 100%; z-index: 999; top: 0; left: ...

jqueryhtmlcssajaxinternet-explorer-10

Live JSON sign-up feature on site

Is there a way to retrieve user email in real-time without using JSON? Currently, I am utilizing JSON for this purpose but it poses the risk of exposing emails that are stored in $resEmailsJson. Ideally, I would like to find a solution to hide all JSON $ ...

javascriptphpjsonajax

Set the input's type attribute to 'checkbox' to address an issue with Internet Explorer

This issue is specific to Internet Explorer, as other browsers like Firefox, Chrome, Safari, and Opera are functioning correctly. Instead of displaying checkboxes, it shows a value box... Here is the code snippet: <html> <head> <title> ...

javascripthtmlinputcheckbox

Error found in Twitter Bootstrap popover plugin: `this.isHTML` function is missing

I took the example directly from their website: http://jsfiddle.net/D2RLR/631/ ... and encountered the following error: this.isHTML is not a function [Break On This Error] $tip.find('.popover-title')[this.isHTML(title) ? 'html&apos ...

javascriptjquerytwitter-bootstrappopover

Yii: Error: The method 'typeahead' is not defined for the object [object Object]

I am currently working on a project using Yii and I encountered a small issue with the Typeahead widget from Yiistrap. It seems that jQuery is being included multiple times - twice before the inclusion of bootstrap.js and once after. Uncaught TypeError: O ...

javascriptphpjquerytwitter-bootstrapyii

The appearance of the Angular material component is altered once integrated into a new Angular application compared to its presentation in the provided example

After adding the Angular Material component "Toolbar" to my project, I noticed that it does not appear the same as it does in the example provided. Despite using the same styles, the outcome is different. Here is what the example looks like on the project ...

cssangularsassangular-material

What is the best way to update a CSS class in React JS?

Suppose I have a CSS class called 'track-your-order' in my stylesheet. Whenever a specific event occurs, I need to modify the properties of this class and apply the updated values to the same div without toggling it. The goal is to replace the ex ...

javascriptcssreactjsstylesheetclassname

Issue with Refreshing Header Row Filter Control in Bootstrap Table

Currently in the process of developing an application that utilizes Bootstrap Table and its extension, Filter Control. One feature I've incorporated is individual search fields for each column to enhance user experience. The challenge I'm facing ...

javascripthtmljquerybootstrap-4bootstrap-table

Verifying the Page Load Status in the Browser

I've been spending a lot of time lately trying to find code that will allow me to trigger an action after the browser finishes loading a page. After much searching, I finally came across this piece of code on <script> var everythingLoaded = s ...

javascriptjquery

Utilize ngx-filter-pipe to Streamline Filtering of Multiple Values

Need assistance with filtering an array using ngx-filter-pipe. I have managed to filter based on a single value condition, but I am unsure how to filter based on multiple values in an array. Any guidance would be appreciated. Angular <input type="text ...

javascriptangulartypescript

Unfortunately, CSS3 PIE is not compatible with border-radius and box-shadow properties

I created a basic HTML/CSS code for testing purposes, but I'm having trouble getting the library to function properly. I've placed the .htc, .php and .js files in the same directory as index.html, but it just won't work. Check out the code ...

javascripthtmlcsscross-browser

What is the point of the horizontal scroll bar in WP Thesis?

There seems to be a horizontal scroll bar appearing at the bottom of my site, even though there is no content extending beyond the visible area. Can anyone provide guidance on how to fix this issue? My website is built on Wordpress 3.0 and utilizes the Th ...

htmlcsswordpresswordpress-thesis-theme

Load an image dynamically within a JavaScript function

I'm currently utilizing a Javascript photo viewer plugin (found here: http://www.photoswipe.com/). My goal is to dynamically update the photos connected to the plugin as the user swipes through different images. To achieve this, I am using a Javascri ...

phpjavascriptjqueryajaxphotoswipe

Importing an image from the public folder in a nested directory with Next.js

My images are stored in the public directory and all of my code is located in the src folder. Usually, when I try to import an image from src/page/page.js like: /image/logo/logo-dark.png, it works. But when I am importing images from the src/component/cor ...

javascriptreactjsnext.js

Revolutionize your rotation axis with Axis in three.js

Greetings! I am currently working with three.js and I am attempting to rotate my 3D model along the x-axis. However, when I use the following code: object.rotation.x += 0.01;, it does not produce the desired effect. The image below depicts the current ro ...

javascriptthree.js3daugmented-reality