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.
Related
Hello i was plotting D3 line graph with brush and zoom
i was able to do it but in y-axis of the graph the values shows zero even after data having some values
and one more problem is mouse-hover even is not firing properly on circles due to pointer-events: all; on .zoom class
adding fiddle here
Set margin left more, 60 instead 20 and you will be happy:)
margin = {top: 20, right: 20, bottom: 110, left: 60},
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.
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.
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)
I have a simple d3 bar chart and I'm trying to draw horizontal lines in the background.
The bars on the chart represent percentages, with a full-height bar being 100%. I want to show 4 bars, at 25%, 50%, 75% and 100% levels. But if I do this:
svg.selectAll('.rule')
.data(y.ticks(4))
.enter().append('line')
.attr('class', 'rule')
.attr('x1', 0)
.attr('x2', width)
.attr('y1', y)
.attr('y2', y);
then the y.ticks(4) shows 5 lines. If I change it to 3 I get 2 lines. If I change it to 5 then I still get 5 lines. Here's an example on JSFiddle.
Also, at the end of that script, I tried adding a y-axis, but it only displays horizontally - how do I get it to appear vertically? This seems to Just Work in all the examples I've seen.
The param of the ticks() method of d3.scale.linear() is just a hint. The method uses this as an approximation, but it will pick "pretty" values. (see here: https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-linear_ticks)
If you want to set the values explicitly, you need to instantiate a d3.svg.axis() and use axis.tickValues() (like you did further down).
Regarding your 2nd question. The axis has a default orientation (which you're seeing), for using as a horizontal, X axis. You need to call .orient("left") or .orient("right") to get a vertical axis. Note, if you use "left" orientation, you won't actually see an axis, bc its numbers will run off the left edge of the SVG and get cropped. So it's a good idea in general to add some padding to the SVG and shift all your graphics within it. If you use "right" orientation you'll see the numbers, but typically in this case you'd translate the axis to the right side of the graph.