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.
Related
I have a HighCharts Pie chart configured as a "donut" style, and I set the title "verticalAlign" to "middle" but this seems to center the title in the whole area taken up by the chart (including the legend) which is fine for a few data points, but once the chart has many points added, the title starts overlapping the colored segments and even the legend. Is there a way to center the title in just the donut?
Example:
Highcharts has quite a number of ways to adjust the style. Not clear how you display your title, but it seems that the problem is in the height of your legend. One way to go is to adjust the 'y' parameter of the title to move title a little:
title: {
text: 'A title to move',
align: 'center',
verticalAlign: 'middle',
y: -20,
}
Drawback is that it may not fill all the possible chart content, so you have to somehow estimate how much you want to adjust the 'y'.
https://api.highcharts.com/highcharts/title.y
After much trial and error, the final solution for my specific use-case involved:
Fixing the 'chart.spacingTop' parameter to 10 pixels. This fixed the top of the chart so it wouldn't dynamically change in the vertical space.
Setting 'plotOptions.pie.size' to '250px'. This fixed the pie size to 250px regardless of how many points were shown.
Setting 'plotOptions.pie.center' to '['50%', 105]'. This centered the chart at 50% width, 105px from the top.
Limiting my series to 24 data points max (to avoid a legend that was too long to manage)
Finally, I created a <div> right before the chart container that allowed me to use CSS to set it relative to the chart, positioning my label right in the center of the donut.
The result:
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.
In one of my highcharts charts, I have a label set up as follows:
labels: {
items: [{
html: 'All Industries',
style: {
left: '80%',
top: '85px',
color: 'black'
}
}]
}
I am finding that the label is only showing up about 15% of the way across the chart, rather than 80%. Now, it seems, the percentage is a percentage of SOMETHING, because if I set the percentage to, say, 550%, it will move to the right significantly. However, I can't figure out what exactly the percentage is being measured against. Anybody have any experience with this? Do you know how I can position this label 80% of the way across the chart area for a chart that's likely to be resized dynamically?
Unfortuantely percentage values are not supported, so need to be value in pixels.
I am trying to reduce the width of the bar. I achieved the same by using pointWidth attribute. However, the padding before and after the label "1 page" is too high. I want to compress the whole graph similar to the second image.
Does anyone know?
Before:
After:
try setting the height of the chart :
chart: {
type: 'bar',
height: 250, // this can be calculated on the basis of categories length along with some default margin at the bottom and top of the chart
}
You can set use pointPadding / groupPadding http://api.highcharts.com/highcharts#plotOptions.bar.groupPadding
http://api.highcharts.com/highcharts#plotOptions.bar.pointPadding
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.