Huge whitespace around plotly chart in bootstrap grid - javascript

I have a .Net application in which I am trying to create a graph using bootstrap.js and plotly.js.
I have a problem with a huge white-space in my grid when I create a responsive chart. I have figured out that a part of the problem is that size of the plotly svg-container defaults to 450px in height.
I have created a fiddle showing the huge white space problem.
In my fiddle I have a small commented code block that sets the layout size, but even setting that doesn't really seem to help with removing most of the white space. Also if it becomes too small it starts cropping away some of the chart.
//can adjust size of svg-container
//but doesn't adjust white space
//var layout = {
// height: 350
//}
//Plotly.plot(gd, pieData, layout);
As you might have guessed I would like to make it smaller - remove quite some of the white space, so that the table below doesn't seem so out of place.

You can use the layout functionality. For your fiddle example you could do the following:
var layout = {
height: 230,
width: 100,
margin: {
l: 60,
r: 10,
b: 0,
t: 10,
pad: 4
}
};
Plotly.plot(gd, pieData, layout);
You can play with the margin property values to position your figure properly.

In the layout tag use width and height to set the container.
Use like -
var layout = {
height : 400,
width : 550,
title : 'Demo',
tracetoggle: false
};
Also the white space is there because of the modebar (which is to take graph snap, zoom, move etc), so you can replace the modebar as well and then shrink the svg container.
To hide modebar -
Plotly.newPlot('myDiv', data, layout, {displayModeBar: false});
To shift the graph to top use inline style in the svg-container div element, though this is not the best way but a hack -
<div id="myDiv" style="margin-top: -50px;"></div>
Hope this helps.

#allStates{
height:300px;
width:300px;
}
I added this to css and it removed whitespace.

Related

jVectorMap renders at the wrong size and there does not appear to be a way to change it

I'm using jVectorMap to create a map inside of a div.
However, no matter what I do, the map takes up only a small portion of the div. It seems that it is due to <svg style="width: 100px; height: 100px;">
I have tried setting the size on the containing div, I've tried various css solutions, but it still doesn't allow me to resize. The background color resizes, but the SVG element simply does not.
How do I resize the SVG element with jVectorMap?
Here is my script:
<script>
$('#map').vectorMap({
map: 'world_mill_en',
regionsSelectable: 1,
regionStyle: {
initial: {
fill: 'white',
"fill-opacity": 1,
stroke: 'none',
"stroke-width": 0,
"stroke-opacity": 1
},
hover: {
"fill-opacity": 0.8
},
selected: {
fill: 'blue'
},
selectedHover: {
}
}
});
</script>
the same issue happened to me, this is exactly as you say, because the container width and height are set to 100%, but then wrong evaluated to 100px.
I changed this in my custom css to:
.jvectormap-container {
width: inherited;
height: inherited;
}
and also changed the jquery-jvectormap.2.0.2.js starting at line 2315 to get the height of my container in the function updateSize().
Then, i set width and height of the container in px with javascript in the window.resize event.
You may experience also this issue when the map is initialized in a secondary hidden page, for example in a single page webapp, because the calculated width and height are not yet accessible.
Hope this helps.
The SVG won't automatically resize unless it has a viewBox attribute. You will need to add one. Exactly what its values need to be will depend on the contents of the SVG.
Once you have added a viewBox, you will need to remove the width and height values (or set them to "100%" - which has the same effect).
You may also need to adjust the preserveAspectRatio attribute. It controls the scaling behaviour.

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.

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