We Keep Coding

D3.js animated grouped bar chart with variable number of groups

I am trying to adapt the animated grouped bar chart example from
https://bl.ocks.org/aholachek/fb0c1cd7ea9707bc8ff55a82402c54b1
for my own purposes. One modification that I am stuck at right now is that my data will have a variable number of groups and the xAxes and blocks have to resize accordingly.
I have already added the resizing of the domains with
x0.domain(data[Object.keys(data)[0]].map(obj =>obj.name))
x1.domain(valueKeys).rangeRound([0, x0.bandwidth()])
in the update function, but this does not seem to be enough. While the width of the bars is resized correctly, the x values are not spaced out evenly and instead get pushed into the far right corner of the graph when adding more elements after the initial creation for example.
For now I only care about the grouped version, not the stacked one.
I would appeciate any pointers

Problem could be solved by clearing out the barContainer before the update. This of course prevents transitions on the already existing bars, but that is good enough for me

Avoiding label text overlap in AmCharts' 3D cylinder charts

I'm showing percentage values inside my chart columns but some of the labels overlap when the values are very small and are hard to read. I tried adjusting the font size but it's not helping. How can I show these labels without any overlap? Screenshot below.

I'm afraid there's very little that can be done as the library doesn't have any strategies to automatically avoid overlap outside of hiding the labels if there's not enough room by default with the default false setting for showAllValueLabels.
You can try tweaking the graph objects' labelOffset property to shift the text up to see if that helps, but that's all you can do on the label side of things.
Alternatively, instead of using labels, just rely on the chart balloons that appear when hovering over the column. You can also enable the chartCursor, which shows all balloons within a category/date instead of just one of the balloons and they won't overlap. You can adjust the cursor's visibility and appearance as well.

Highcharts - Area chart advanced layering

I'd like to have a version of a basic area graph where the layering works not by adding one chart and then overlaying a second chart, but instead for every x value, a colored line is drawn from the higher chart's y coordinate to the y coordinate vertically below on the lower chart, and then a different colored line is drawn from this lower chart's y coordinate to the x axis.
Here's images of first the default chart and then my edits as examples.
I anticipate having potentially many charts on one page (anywhere from 1-5,7,10 who knows). And the reason I'm not just putting the "smaller" of the two charts on a higher layer than the "larger" is that they could swap positions over time. See here for two data sets that that swap in which chart has larger values. I'm leaning towards not allowing transparent charts like the default behavior because when many charts of different colors are overlaid their colors mesh together and become difficult to discern.
Is what I've described possible? Are there alternative ways I could accomplish this? Any help would be appreciated.

Set the legend alignment of pie chart in Kendo Dataviz

I am using kendo ui to render some pie charts to my web page. They have a variable data set, some will have a legend which is 1 row and some will be 2 rows.
When I have the position set to bottom the pie chart with two rows of legend ends up being smaller because its trying to fit the second row in the same area, so it forces the pie chart to be smaller. The legend is displaying how I would like it to display though, with the items being center aligned.
I've tried to get around this by setting the legend position to custom instead of bottom. This takes the legend out of the sizing equation and positions it absolutely. This means that the pie chart sizes are now all the same, but the legend data is now left aligned instead of centered. This makes the legend with only 2 items look bad since its now all off to the left instead of centered.
Does anyone know if there's a way to set the legend to be center aligned while i have it set to using a custom position?
From what I can see in the API documentation, there is no option. Also, because the labels will be of variable lengths, i can't conditionally statically position them because depending on the label length different amounts may fit on each row.
I have setup a JS Bin example showing the issue:
http://jsbin.com/fejeyi/5/
The first two charts are using position bottom and you can see the pie's are different sizes, but the legend displays correctly.
The second two charts are using position custom and you can see the pies are the same size, but the legend is left aligned.
Any help appreciated.
Here's the source of the JS Bin:
http://jsbin.com/fejeyi/5/watch?html,js,output
Cheers!

Google Visualization Barchart - increase label padding / distance from label to chart

I am using the Google Visualization API to generate some pretty simple bar charts. The only slight complication is that the labels can be very long. The client is fine with them truncating but wants to give the chart a little more space.
Try as I might, I cannot find a way to increase the distance from the labels to the chart area! The irritating things is that if the labels are all short, the padding is fine; as soon as they get long, they all right align right up to the chart before truncating.
I've tried various chartArea.width / chartArea.left combinations, no joy; tried adding padding and margins to the vAxis.textStyle in the hope that the documentation is just incomplete; no joy.
I cannot believe that with all the other trillions of configuration options there is no way to increase label padding!
Fiddle:
http://jsfiddle.net/9v6os5x6/2/
EDIT: What it looks like it is doing is either calculating a decent padding for labels that fit and then not compensating for the ellipsis, or leaving a space that is exactly one ellipsis wide when drawing non-truncated labels, because if you set all labels to be short then just increase one, what it looks like it is doing is filling the gap of the truncated one with the ellipsis, then aligning all the others.
This is much easier to see by fiddling with the fiddle than it is to explain in words :)