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.
Related
I used the multiple axes on the highchart
During Zoom operation the x values are getting hidden
I used linked to attribute also
JsFiddle
zoomType: 'y',
zoomType: String
Decides in what dimensions the user can zoom by dragging the mouse. Can be one of x, y or xy.
Try it:
None by default
x
y
xy
I referred this jsfiddle to figure out what's happening. I think, this behavior is not a bug/issue.
This github issue mentioned in comments is not the problem here. Because what it is saying is to use linkedTo: 0 which is already present in this example.
It actually depends on how much area and more importantly from where to where you select for zooming in. Let's see that by examples:
In the following image, the rectangle signifies the width of one column.
Now, if you start your pinch from more than half of the width of any column or end the pinch after half of the width of a column, that column would be fully visible along with x-Axis labels.
But, if you pinch any less, say from the middle of orange bar of first column, till middle of next column's blue bar, it's not going to show whole columns and hence it ends up with hidden x-Axis labels.
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've been playing around with a highcharts bar chart and noticed some strange behavior. If I have a long name in the x axis (the categories), and if I have labels enabled to show up on the bars, not all the labels will appear. If I remove the long x axis name, then the label that wasn't appearing on the bar before will suddenly appear. I have a working Jsfiddle example here:
https://jsfiddle.net/p55t0bmf/ (notice label isn't appearing for one of the bars, should say 5 but nothing is there)
I placed a long name in the categories section to trigger this behavior:
xAxis: {
categories: ["LONG NAME THAT WILL BREAK US"]
}
Does anyone know why this would be happening, and is there a way to fix this behavior (without resorting to short x axis names of course)?
Set allowOverlap to true. When you have longer xAxis labels, then you have less horizontal space. Labels have padding which can overlap and hide some of them. Anyway, your demo works for me exactly the same way with or without long xAxis category.
Demo with all labels: https://jsfiddle.net/p55t0bmf/1/
stacking option cause this problem. If you set the stacking, then highchart change the label opacity automatically.
Solution : Remove stacking options from chart, if you dont need or write css to override label opacity.
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.