Develop Reference

ChartJS - Line chart - Additional padding top/right to add additional lines

I created a chart using Chart.js, but would like add additional space after the last x and y line to make it look like "it could continue".
I've looked at multiple attributes from the documentation and other answers on SO but couldn't find a solution.
What i have
What i want to achieve
(Note the extra lines on the top/right edges)
JSFiddle: https://jsfiddle.net/zncbv9o6/
I also tried to use
layout: {
padding: {
right: 20
}
}
which, however, only adds space around the chart and not from the inside to add these lines.

How to increase label padding in the nodes of a Vis.js network graph?

When creating network graphs with Vis.js, the nodes in the network are drawn with labels that - for my use case - don't have enough 'padding', i.e., there is not enough space between the node label text and the border of the node. The following pic illustrates it:
Considering the vast amount of config options already available in Vis.js, I thought increasing label padding would be simple, but for the life of me, can't figure out how to do it. Have gone through the official docs, and have searched through StackOverflow and Google, but found no hints. Feel like I'm missing something obvious - can anyone shed a light?...

I found it - at least it's working for vis#4.20.1 which i installed with npm. They use margin to modify the space between the border and the label text.
The options object you pass in, it needs a margin property on the nodes property like this:
const options = {
nodes: {
margin: 10
}
}
You can also specify different margins for top, bottom, right, left like this:
const options = {
nodes: {
margin: {
top: 10,
bottom: 20,
left: 5,
right: 5
}
}
I can't seem to specify in anything but px - i tried to use '1em' for input, but it seems it only takes integer values - and expresses it in pixels.
In case you're curious, i found the information i needed from the options.js file located in node_modules\vis\lib\network. If you're looking for options for the other areas of vis (like timeline), i bet there is an options file for that in a similar folder.

This property is not yet customizable, however I managed to change it directly in the vis.js source file:
Search for the Box class definition : var Box = function (_NodeBase)
In the resize function there is the margin to modify : var margin = 5;
Change it to whatever you want, and it's done

I've been just hitting the same problem. The only solution I found was to set borderWidth and borderWidthSelected of the node to the amount of padding I wanted. To make it not look too ugly, you can also set the border the same color as the background of the node.
Besides, it gives the graph a nice modern flat look.

Adding c3.js padding without cutting off graph

This is in response to the following question, How to remove padding in c3.js?, where the answer that was provided solves this issue, but also raises another issue -- the buttons on the graph are cut off at the end --
How would I get there to be no padding and the buttons not to be cut off, for example, it should look like:

The dots are getting clipped off because of the clip-path set on the chart layer. You just have to remove it. You can use D3 for this, like so
d3.select(chart.element).select("." + c3.chart.internal.fn.CLASS.chart).attr("clip-path", null);
where chart is your C3 chart object
Fiddle - http://jsfiddle.net/zds67nh1/
However you most probably want the dots to appear above the axis layer. For that you need to detach and attach the chart layer (in SVG, the z-index is determined by the order - the last of the siblings come on top. So you have to basically move it to the end of the siblings list), like so
var chartLayer = d3.select(chart.element).select("." + c3.chart.internal.fn.CLASS.chart);
var chartLayerParentNode = chartLayer.node().parentNode;
var chartLayerNode = chartLayer.remove();
chartLayerParentNode.appendChild(chartLayerNode.node());
chartLayer.attr("clip-path", null);
Fidle - http://jsfiddle.net/7e1eL22f/

Highcharts Bar Chart - Labels Not Appearing in Bar

I've been playing around with a highcharts bar chart and noticed some strange behavior. If I have a long name in the x axis (the categories), and if I have labels enabled to show up on the bars, not all the labels will appear. If I remove the long x axis name, then the label that wasn't appearing on the bar before will suddenly appear. I have a working Jsfiddle example here:
https://jsfiddle.net/p55t0bmf/ (notice label isn't appearing for one of the bars, should say 5 but nothing is there)
I placed a long name in the categories section to trigger this behavior:
xAxis: {
categories: ["LONG NAME THAT WILL BREAK US"]
}
Does anyone know why this would be happening, and is there a way to fix this behavior (without resorting to short x axis names of course)?

Set allowOverlap to true. When you have longer xAxis labels, then you have less horizontal space. Labels have padding which can overlap and hide some of them. Anyway, your demo works for me exactly the same way with or without long xAxis category.
Demo with all labels: https://jsfiddle.net/p55t0bmf/1/

stacking option cause this problem. If you set the stacking, then highchart change the label opacity automatically.
Solution : Remove stacking options from chart, if you dont need or write css to override label opacity.

Svg text element being overlapped by another svg element

I'm building a pie chart at the moment, and it's mostly done.
Anyway, I'm trying to implement some hover effects on each pie slice, but I've come across a problem I'm unable to solve. When you hover over an element the text increases in size, and also uses a filter to add a black background. The issue with this is that the text is sometimes being hidden behind other elements, as if those elements are on top of it. My best solution to fix this was adding visibility and making it !important.
.pieChart svg>g text.hover {
font-size: 1.3em;
fill: #fff;
filter: url(#pieTextFilter);
visibility: visible !important;
}
This, however, doesn't solve my problem.
Here is a jsfiddle that represents the problem (hover you mouse of slice 4): http://jsfiddle.net/tinygram/22o1epyp/3/
If you're familiar with D3, it might be important to note that this happens only after I update the graph. If you look at the bottom of my jsfiddle, you'll see that I'm starting the graph and then running it again with some updated data. I have noticed that this adds a new and at the end of the svg in the dom. I honestly don't know if this is important, but I thought I should mention it.

As #LarsKotthoff mentions in his comment, it's all in the order. You initially build a pie chart with 4 slices, you then add a 5th slice. So the enter selection first adds 4 slices and 4 labels. On the addition of the 5th slice, it updates the first 4 slices/labels and enters a 5th slice/label. This addition of a 5th slice is then on top of the 4th label.
See this fiddle. The problem goes away because I've invoked the exit:
tests(data);
tests({});
tests(data2);
A better fix might just be to remove all the texts before update:
tests(data);
d3.selectAll('text').remove();
tests(data2);