Here is a JSFiddle of what I currently have:
http://jsfiddle.net/DGwcF/
I have set both the margin and spacing to 0, though the padding still remains around the chart itself.
How do I make the chart go all the way to the edge of the container? Thank you!
You need to set pane's size as 100%, see this:
http://jsfiddle.net/DGwcF/3/
pane:{
size: '100%',
}
Related
I am using Chart.js as my charting library. I have created horizontalBar chart.
I need to set the width of individual bar in the chart.
I did not found anything specific in chartjs documentation but while looking at source code I found the option barThickness which is setting the fixed bar width
But as number of rows increase, instead of increasing the height of the chart, the bar are colliding with each other. Please check fiddle for example:
https://jsfiddle.net/orhp0zLg/
Is there any way we can increase the height of the chart instead of letting the bars collide with each other?
The barThickness property is a fixed width, as you noticed in your issue.
However, you have an other property called barPercentage which is a multiplier of the max width of your bars.
You should set berPercentage to a value (let's say 0.95) and you'll always have the same format, no matter how many bars you have :
options: {
scales: {
yAxes: [{
barPercentage: 0.95,
}]
}
}
Here is your updated fiddle with the fix and here are the results with first 7 values and then 12 :
I have a Bar chart that is showing one single bar. My intention is to have this as a sliver at the top of my page. It is a breakdown of time spent by each partner in the process for the given page I am on.
The issue I am having is the PlotArea (my assumption, the entire rectangle of canvas to work on) which I have made green in the this fiddle. The multi-colored bar is really all I want to see. I am trying to remove the green completely. So once it works, no matter what I set the following to:
'chartArea' : {
'height' : 100,
'margin' : 0
},
it makes the colored bar that height with no green area.
Set the plotArea margin to -100
'plotArea': { 'margin': -100,background: "green" },
I agree that seems like strange behavior! This may need to change depending on the height of the chartArea.
I've tried looking for a fix to this problem but wasn't able to find one that pertained to the haxis labels...
In the picture below, you'll notice that the last percentage label on the haxis is not showing up. I'm not sure what the issue is. I've tried messing around with the chartArea width and left values but that didnt seem to work. I've also made sure that the containing div is wide enough so it's not cutting off the '100%' label.
Any ideas?
Update w/ jsFiddle
jsFiddle with my code
<body bgcolor = "black">
<div id="chart_language_div"></div>
<div id="chart_api_div"></div>
<div id="chart_software_div"></div>
</body>
As you can see from my div declarations, I don't have any containing divs in the example and the issue still exists.
Here is your problem code
chartArea: {left: 140, width:'80%', height:'70%'},
Here is a solution
chartArea: {left: 140, width: 420, height:'70%'},
Basically, you were right about the label not being created. Looks like Google is checking the chart width before making the label, so rather than the browser clipping the label, Google charts never creates it.
So with a containing div of 580, a left attribute of 140, and a chart width of 80% (464px), you were overflowing. The math is 464+140 = 604, which is greater than your containing element width (580). Setting the width to a flat 420 gives you 120+420=560, leaving 20px for the label on the right side.
I'd recommend never mixing percentages and fixed widths (that goes for every layout engine I've dealt with). Having a percentage height and fixed width is fine.
Jsfiddle: http://jsfiddle.net/sbo2ggp3/4/
I'm attempting to use a highcharts in conjunction with Bootstrap. The pie chart is placed inside a column of 6 for example, so it takes up half the page. What has been happening is the datalabels are too long and so are being cropped out of the containing div.
A fix that has been proposed for this is to set a width on the datalabels.
like so:
pie: {
size: '60%',
allowPointSelect: true,
dataLabels: {
style:{
width:100
color:'black'
}
}
}
}
This works flawlessly for Chrome and mozilla, the width is set and the position of the datalabel changes so its all drawn closer to the pie chart. But when testing in IE8, (and I have to account for it unfortunately) the width is set, but it appears that the position of the datalabel is not changing, so I get even less of the data label visible on the screen.
I'll try get a jsfiddle or a screenshot up shortly so you can see what I mean, but initially I was just seeing if anyone had come across this issue before, or if there's a simple fix I am just missing.
Jsfiddle
I've commented out the width in the plot options so you can see what's happening.
When I uncomment the width, it renders perfectly in Chrome and mozilla. But in IE8, the position of the label doesn't change, so the left labels end up far away from the pie chart and still cropped.
I am using jqplot for charting report in my current application..
I have one ChartCtrl div which is using as a chart placeholder.
And one Parent Div is controlled for positioning chart in page. I am calculating the width of the chart dynamically based on the no. of bars are present and initiate the scroll for the same for parent div, so that if more bars are plotted i can scroll the chart horizontally.
But when I scroll the chart, the Left Yaxis is also scrolling which is expected.. But is there any way to fix the left Y-axis only the chart content is scrollable in jqplot.
Please provide some suggestions on this.
I also have the same issue, but I solved by using little bit change in jqplot.css. Just in your html add this style class:
<style type="text/css">
.jqplot-axis.jqplot-yaxis{
position : fixed !important;
}
.jqplot-series-canvas {
overflow-x : scroll;
}
</style>
If your problem is solved then just vote...