Develop Reference

Is it possible to avoid the shrinking of Chart.js pie charts when accompanied by labels?

To get labels on Chart.js Pie and Doughnut charts, there are plugins to do so, like: chartjs-plugin-labels but after doing so I noticed a big problem for my UI design:
The size of the actual chart shrinks so that the labels fit within the canvas. It makes sense that the labels need to be able to fit within the canvas they're rendered on, and thus the shrinking of the chart. But sometimes I may use labels, and other times not, and I need my pie charts to render the same size regardless.
Is there a solution in the settings of either Chart.js (the label plugin I'm using is compatible with < 3.0, I'm using 2.9) or chartjs-plugin-labels to maintain consistent chart size, regardless of whether labels are applied?
I tried applying an empty label to every chart, but the size of the chart actually shrinks based on the specific size of the labels being rendered, so aside from being a hacky solution, it doesn't consistently solve the uniformity problem.
For example maybe a way to make charts start off taking 50% of the canvas?

Yes, this is fairly simple actually. The chartjs-plugin-labels.js file contains several lines which force the chart to become smaller when the label settings set the position to either "border" or "outside". Download the script to your own server, comment out the lines below, and everything should work as expected. CodePen demo
Comment/remove these lines:
if (this.options.position === 'border') {
offset = (lines.length - 1) * this.options.fontSize / 2;
}
if (label.options.position === 'outside') {
someOutside = true;
var padding = label.options.fontSize * 1.5 + label.options.outsidePadding;
if (padding > maxPadding) {
maxPadding = padding;
}
}
Here is the updated JS file you can use: https://pastebin.com/raw/gSffqqKu
Just download it as chartjs-plugin-labels.js and use it in your project instead of the original plugin file.

d3:Adding Axis like a Box

I have d3 graph with xaxis and Y axis.I want to add axis to the top and right to make it look like a box.
Something like This.

You could go through this article for adding multiple axes. You should create new axis generators and give the orient as 'right' and top and call them finally.
http://www.d3noob.org/2013/01/using-multiple-axes-for-d3js-graph.html
EDIT:
I have made a simple line chart with your requirements. Have a look at https://jsfiddle.net/j0kaLf59/
Also as mentioned in the comments, you could just add two line elements. Have a look at this fiddle https://jsfiddle.net/a6o2hkfq/
Reference:
Create a D3 axis without tick labels
http://www.tutorialsteacher.com/d3js/create-svg-elements-in-d3js

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/

How to customize nvd3's tooltips and remove labels from x axis

I have this chart, but as you can see it has some problems:
The tooltip height is wrong, there is that ugly blank space at the top. Since nvd3 has no documentation I really don't know how to proceed;
The x axis labels are all overlapping, I want either to remove them or to tilt them (like 45 deg.). The second option is best. I also tried .staggeredLabels(true) but they still overlap.
EDIT: I solved the second one by removing labels. Actually I don't remove them but rather hide them with:
.nv-x text {
display: none;
}

Since no one answered I just post the solution to the second problem:
.nv-x text {
display: none;
}

The blank spot is actually the key. It seems like maybe your object doesn't have a name?

Need for help in jQuery.Flot legend formatting

By default flot was generated legend block (table) like this ([#] - color box):
_________________
|_[#]_|_label_1_|
|_[#]_|_label_2_|
|_..._|_......._|
I wanna have horizontal legend like this:
______________________________.______________________________
|_[#]_|_My_long_label_1_______|_[#]_|_My_another_label_2____|
|_[#]_|_Trololo_label_here____|_[#]_|_hell,_yeah!___________|
.............................................................
I've been tried use labelFormatter() but have failed =(
I was added order number to each series element and can use it in labelFormatter() (like ...if(series.num % 2 == 0) { ...next row... }

Try Following,
legend: {
show: true,
noColumns:2,
container:$("#graph_legend")
}

Unfortunately, it doesn't work that way...
Flot only lets you manage how the labels look, not the structure of the whole legend itself. See the source for how it builds the table.
In there you'll notice that it just builds an html table and includes your labels in the appropriate cell.
Your best bet, given that information is to just make your own by hand, and suppress the generation of the default legend entirely (show:false). You could pretty easily take the insertLegend function from the flot source and make your own version of it that stacks them horizontally.