We Keep Coding

Highcharts semi-pie - remove space between pie and legend

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;
}

d3 resizes path (gains 10 px width) on update - why?

TL;DR: Why does the line graph path in the fiddle example grow 10 px width when updated?
Long version: I am building a little microeconomic simulation in d3, trying to illustrate price elasticity. Here's a fiddle (which doesn't actually illustrate elasticity, it's just a dummy to try to get the graph working). The idea is you adjust the price (the height of the price bars by pulling with the mouse), and the demand line graph updates.
The only trouble is that when it updates, the line graph <path> seems to grow 10px. (you can verify this in your browser inspector - it should go from 408px to 418px). I don't know why this is happening.
I don't believe an extra point is being added, merely that the path is being "stretched" horizontally. The relevant update function uses the the original data as the input to the x.axis domain - so I don't see why the data points should be mapped differently to the x range.
//...extract of the update function
var demandData = demandForecastData.map( function(d, i){
return [ d[0], d[1] + somestuff ];
});
updateDemand(demandData);
Can someone clever tell me what's going on?

You set margins as so:
//svg margins for axis labelling, etc
var margin = {top: 20, right: 40, bottom: 30, left: 40}
But upon drawing it you decrease the right margin by 10:
//graph the bar chart
var margin = {top: 20, right: 30, bottom: 30, left: 40}
just update it to right: 40 and it's fixed.

How to minimize whitespace around Baidu's echarts

I'm trying to incorporate Baidu's echarts (which look really good). However, there is a lot of whitespace around the actual graph when one doesn't set a title nor uses their toolbar. Is there a way to have the graph/chart use more of the canvas?
My current solution to add an extra inside the container one and then set it's width and height to be be bigger by the margins I want to remove and the offset it by setting 'top' and 'left' to negative values of the respective margins. Not elegant and more importantly, not robust, but it works for the moment.

In ECharts 4, 5
As mentioned by some other posters, the correct way to get rid of the whitespace is to change options.grid.
https://echarts.apache.org/en/option.html#grid
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0
}
In ECharts 4, the names of the grid properties have been changed to left, right, top, and bottom.
Thanks to the answers above for pointing me in the right direction!
Further, changing the option.legend, as suggested above, had no effect on my chart.

You can use the properties defined on the grid (x, y, x2 and y2).
These properties are mentioned on the documentation: http://echarts.baidu.com/doc/doc-en.html#Grid

In ECharts 3 you can use the options grid.left, grid.top, grid.right and/or grid.bottom. According to the documentation, left and right default to 10%, and top and bottom default to 60 (px).
Documentation: https://ecomfe.github.io/echarts-doc/public/en/option.html#grid.
const option = {
// these are the grid default values
grid: {
top: 60,
bottom: 60,
left: '10%',
right: '10%',
},
// your other options...
}

Adding values to your themes grid object, like so:
var theme = {
grid: {
x: 40,
y: 20,
x2: 40,
y2: 20
}
}

legend: {
padding: 0,
itemGap: 0,
data: [' ', ' ']
},
In here we can just simply remove the padding of the legend. even though you are not specifying one, it is taking the default values. Unfortunately, eCharts doesn't give flexible option of setting chartArea through options.
In google Charts you can mention it 100% and it'll cover all the available area. I tried the above mentioned work around and could cover a bit more space after that.

in Echart u can make chart/graph with combination of the chart, and thre is too many config for every charts section, like legend, etc... just have look at their api documantation on their web site and Example page (Combinations part)

Add some gap in between legend and the chart

In my fiddle here, I want to add some gap in between the legends at the top and the chart, so as to look better.
I tried:
d3.select(".nv-linesWrap").style("padding-top","50px");
but it didnt work.
How do I fix this?
jsFiddle

take a look at xTicks attributes in line 102.
.attr('transform', function(d,i,j) { return 'translate (-10, 40) rotate(-90 0,0)' });
There you can translate and rotate your scalevalues.
In your case, just raise the value of the second translate paramater (40->60).
And a tipp:
play around with those attributes, the first rotateparameter to "-45" makes it really better to read, so you dont have to turn your head every time ;)
//EDIT (Wrong solution)
the legendwrap has the same function and an equal behaviour of the translate function.
Just insert following in line 110:
d3.select(".nv-legendWrap")
.style("float", "right")
.attr("transform", "translate(0,-75)");
Maybe you now have to resize your whole SVG Container where the whole chart is placed
//EDIT2 (Improvement)
to resize the whole Chart (or margin-top+25) i used the following way: just put this part after your legendWrap.
d3.select(".nv-wrap.nv-lineChart").attr("transform", "translate(100,75)");

You can control the distance of the chart legend from chart as follows:
chart.legend.margin({
top: 0,
bottom: 10,
left: 0,
right: 0
});
Please modify the top / bottom values as required.
Note that by default nvd3 uses following values: {top: 5, right: 0, bottom: 5, left: 0}
For introducing space between individual legends there is no direct way as this is not controlled by CSS property and is hard-coded within nvd3 itself.
In nvd3 legend.js line 120:
seriesWidths.push(nodeTextLength + 128); // 28 is ~ the width of the circle plus some padding
You can increase this 28 value to increase space between legends.

DC.js - disabling brush also disables chart click events / crossfilter

Disabling the brush on a bar chart seems to also disable the crossfilter between this chart and others. Clicking on the bars no longer results in filtering of other chart data.
What am I missing?
bar
.width(100)
.height(100)
.margins({top: 5, right: 5, bottom: 5, left: 5})
.dimension(dim)
.group(tot)
.x(d3.scale.linear().domain([0,10]))
.centerBar(true)
.brushOn(false)
.renderHorizontalGridLines(true)
.elasticY(true)
.yAxisLabel("Amount")
.yAxis().tickFormat(d3.format("s"))

I was able to implement bar selection by changing the scale to ordinal and adding xUnits:
.x(d3.scale.ordinal().domain([0,1,2,3,4,5,6,7,8,9,10]))
.xUnits(dc.units.ordinal)
Interestingly, this caused the bars to fall off center. This was fixed by removing the following:
.centerBar(true)