Hello I am trying to make a scatterChart with the nvd3.js libary. Now the thing is that I want to have both axis the same width/height. But even if both the height and width in css as in code are set to the same height the y axis stays longer in height.
JS:
var chart = nv.models.scatterChart()
.width(300)
.height(300)
.showXAxis(true)
.showYAxis(true)
.forceX([-100,100])
.forceY([-100,100])
.tooltips(true)
.showLegend(false)
.tooltipContent(function(){
return 'clock';
});
css:
#main-chart {
width: 300px;
height: 300px;
margin: 0 auto;
}
html:
<div class="container" ng-controller="film_factor_controller">
<svg bubble-chart id="main-chart"></svg>
hope someone can help me out
From the source code you may find that, the forceX and forceY are set to the chart with D3's domain() API. So I guess that this nvd3 API here won't really 'force', as the real length will be calculated by d3 and that is determined by the input range.
Maybe you need to calculate the domain by your self so that the maxY and maxX are exactly locate at the edge of your axis.
Related
Is it possible in highcharts to make the chart width, the plotting area the same width whether there are labels or not?
For example, both these charts have width 150 but one looks thinner than the other because it has the labels enabled.
I can do this programmatically but it is a bit messy. Is there a way?. I tried, for example, to set the label as enabled but not visible but this combination of options does not exist.
Thanks for any help
You can set fixed chart margin:
chart: {
marginBottom: 20
}
Live demo: http://jsfiddle.net/BlackLabel/st8c0r1p/
API Reference: https://api.highcharts.com/highcharts/chart.marginBottom
I'm struggling with the semi circle donut chat of Highcharts. I'm trying to reduce the gap between the bottom of the donut and the legend below, without success.
Here is the basic chart I'm working on :
https://jsfiddle.net/vmw0pekL/2/
And the result is :
This is the basic graph without so many customization. What I tried next is to play with the marginTop and marginBottom chart properties. I managed to reduce the space between the graph and the legend but now I have a huge gap at the top of the chart... Here's the result :
https://jsfiddle.net/vmw0pekL/3/
And the result is :
Do someone know how to deal with this issue ? I'd like to get no space on top on the graph, and no space between the graph and the legend.
The reason why there is a big blank gap below the semi circle donut chart, is because this space is reserved for the lower part of the full pie chart (change startAngle to 0 and endAngle to 360 to see what I mean). You can change that by setting a new values for the center array and by setting a new size of the pie.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.pie.center
Example:
https://jsfiddle.net/327uxkbt/
this is one easy way of doing it :
chart: {
marginTop: 10,
marginBottom: -150,
marginLeft: -100,
marginRight: -100
},
#container {
border: 1px solid red;
height: 240px;
font-size: 8px;
width: 370px;
}
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.
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.
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.