Highcharts semi-pie - remove space between pie and legend - javascript

I'm struggling with the semi circle donut chat of Highcharts. I'm trying to reduce the gap between the bottom of the donut and the legend below, without success.
Here is the basic chart I'm working on :
https://jsfiddle.net/vmw0pekL/2/
And the result is :
This is the basic graph without so many customization. What I tried next is to play with the marginTop and marginBottom chart properties. I managed to reduce the space between the graph and the legend but now I have a huge gap at the top of the chart... Here's the result :
https://jsfiddle.net/vmw0pekL/3/
And the result is :
Do someone know how to deal with this issue ? I'd like to get no space on top on the graph, and no space between the graph and the legend.

The reason why there is a big blank gap below the semi circle donut chart, is because this space is reserved for the lower part of the full pie chart (change startAngle to 0 and endAngle to 360 to see what I mean). You can change that by setting a new values for the center array and by setting a new size of the pie.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.pie.center
Example:
https://jsfiddle.net/327uxkbt/

this is one easy way of doing it :
chart: {
marginTop: 10,
marginBottom: -150,
marginLeft: -100,
marginRight: -100
},
#container {
border: 1px solid red;
height: 240px;
font-size: 8px;
width: 370px;
}

Related

How to center title vertically in HighCharts pie/donut chart?

I have a HighCharts Pie chart configured as a "donut" style, and I set the title "verticalAlign" to "middle" but this seems to center the title in the whole area taken up by the chart (including the legend) which is fine for a few data points, but once the chart has many points added, the title starts overlapping the colored segments and even the legend. Is there a way to center the title in just the donut?
Example:
Highcharts has quite a number of ways to adjust the style. Not clear how you display your title, but it seems that the problem is in the height of your legend. One way to go is to adjust the 'y' parameter of the title to move title a little:
title: {
text: 'A title to move',
align: 'center',
verticalAlign: 'middle',
y: -20,
}
Drawback is that it may not fill all the possible chart content, so you have to somehow estimate how much you want to adjust the 'y'.
https://api.highcharts.com/highcharts/title.y
After much trial and error, the final solution for my specific use-case involved:
Fixing the 'chart.spacingTop' parameter to 10 pixels. This fixed the top of the chart so it wouldn't dynamically change in the vertical space.
Setting 'plotOptions.pie.size' to '250px'. This fixed the pie size to 250px regardless of how many points were shown.
Setting 'plotOptions.pie.center' to '['50%', 105]'. This centered the chart at 50% width, 105px from the top.
Limiting my series to 24 data points max (to avoid a legend that was too long to manage)
Finally, I created a <div> right before the chart container that allowed me to use CSS to set it relative to the chart, positioning my label right in the center of the donut.
The result:

Make chart width exclude x axis labels

Is it possible in highcharts to make the chart width, the plotting area the same width whether there are labels or not?
For example, both these charts have width 150 but one looks thinner than the other because it has the labels enabled.
I can do this programmatically but it is a bit messy. Is there a way?. I tried, for example, to set the label as enabled but not visible but this combination of options does not exist.
Thanks for any help
You can set fixed chart margin:
chart: {
marginBottom: 20
}
Live demo: http://jsfiddle.net/BlackLabel/st8c0r1p/
API Reference: https://api.highcharts.com/highcharts/chart.marginBottom

NVD3.js scatter

Hello I am trying to make a scatterChart with the nvd3.js libary. Now the thing is that I want to have both axis the same width/height. But even if both the height and width in css as in code are set to the same height the y axis stays longer in height.
JS:
var chart = nv.models.scatterChart()
.width(300)
.height(300)
.showXAxis(true)
.showYAxis(true)
.forceX([-100,100])
.forceY([-100,100])
.tooltips(true)
.showLegend(false)
.tooltipContent(function(){
return 'clock';
});
css:
#main-chart {
width: 300px;
height: 300px;
margin: 0 auto;
}
html:
<div class="container" ng-controller="film_factor_controller">
<svg bubble-chart id="main-chart"></svg>
hope someone can help me out
From the source code you may find that, the forceX and forceY are set to the chart with D3's domain() API. So I guess that this nvd3 API here won't really 'force', as the real length will be calculated by d3 and that is determined by the input range.
Maybe you need to calculate the domain by your self so that the maxY and maxX are exactly locate at the edge of your axis.

jQuery Flot: Set width of chart (without labels)

Is there any way to set the actual size of the chart (without its labels)?
I have a container that is 880 pixels width and I'd like to have the chart extend exactly to that and have the axes rather stick out. Right now it's of course applying padding so that the axes can fit in the designated area.
I fiddled around with fixed labelWidth options and negative margins applied to the container but that didn't get me anywhere useful.
To make the axes stick out, you can set the labelWidth and labelHeight of the axes (y and x, respectively) to a negative value and give the container a margin, so there's enough room outside.
CSS:
#placeholder {
border 2px solid red;
margin: 30px;
}
Flot options:
var options = {
xaxis: { labelHeight: -10 },
yaxis: { labelWidth: -10 }
}
There is still a gap between the container border and the plot, as you can see in jsFiddle. You can control that with the grid's minBorderMargin property, but it doesn't completely hide the plot border, so you may want to set the grid's borderWidth to 0, or set borderColor. I updated the jsFiddle with that.

JqPlot pie chart jqplot-event-canvas position top left

I've just started using JqPlot and want to display a small chart
However there is always a small margin at the top and to the left.
Looking at the css produced the jqplot-event-canvas is given absolute position with top and left set at 10px.
Is there a simple way to solve this so that the pie is positioned without the extra spacing?
I've tried to set the padding to 0 in the grid and pie rendererOptions.
Also set show:false on the axes, title, ledgend ...,
Any ideas?
Try setting the gridPadding like this:
var plot1 = $.jqplot('pie1', [data], {
gridPadding: {top:0, bottom:0, left:0, right:0},
....
Because by default, each plot has the following grid padding:
{top:10, right:10, bottom:23, left:10};
I think this might explain the issue you are seeing.

Categories