Google Charts bar chart last value label cutoff - javascript

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/

Related

Change legend size in highmaps?

Does anyone know of a good way to change the legend size in highmaps? Here is a fiddle in which the width and itemWidth properties of the legend are set. I found this solution searching the forum and this solution works for charts. Exmaple:
Highcharts set legend height
But I can't find a good way to do it for maps.
http://jsfiddle.net/meo67rhf/
legend: {
width: 200,
itemWidth: 200
}
I've also tried stetting the width use DOM methods:
i.e. document.getElementsByClassName("highcharts-legend").style.width = "200px";
Neither of which are working for me. I'm just trying to modify the height and width of the legend. Any help is appreciated.
You're on the right track with this one.
Yes, Highmaps can adjust the size of the legend, too. I'm not sure what you're looking to do, but the height is automatically defined by the number of elements that are included inside. You can play around with this by changing the values of width, itemWidth, and layout.
In your example fiddle, if you change the values above, you'll get a different layout. See what happens when you shift them to:
width: 300,
itemWidth: 100,
layout: 'horizontal',
You get the following:
The white box is taking on the defined width of 300. Setting the itemWidth of 100 means the individual legend items will take on 1/3 of the total defined width (just don't use percentages; that won't work).
One extra thing you could also do is have these values be percentages of the container element. If you have the container's width and/or height defined in a stylesheet declaration, you can set JavaScript variables to capture those values on runtime and adjust your legend accordingly.
For example:
// in your inline stylesheet
#container: { width: '650px', height: '450px' }
// variables defined before your chart options
var chartHeight = $('#container').height();
var chartWidth = $('#container').width();
// in your legend
width: chartWidth * 0.3, // 30% of total width
itemWidth: chartWidth * 0.1, // 10% of total width
Setting the layout to 'horizontal' will give you a legend that's shorter than if you had used the value vertical.
I hope all of this is helpful for you.

KendoUI Bar Chart - PlotArea Not Working As Assumed

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.

Highcharts Pie chart datalabels cut off/ positioning

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.

Remove padding from HighCharts polar chart

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%',
}

google charts graphics Multiline text labels

For a statistics/monitoring tool we use google charts graphs to show messages and errors from an application. Those messages are shown in labels of a graphics on the vertical axis but most of the times the messagetexts are too long, having too much characters to be fit in the label. They get shortcutted by ... in the end but what we actually want is that they are wordwrapped or if that is not possible, manually linebreaked with html br tags. Too bad, those are just ignored by the google chart labels.
My question is, is there a way to break the messagetexts over multiple lines instead of getting shortcutted with ... at the end? If so, how can this be done? I already found the possibility for this for the horizontal axis here, but we want it to have it for the vertical axis. If it is possible of course.
I also tried to make a fiddler example but it seems fiddler can't handle google graphs that well. When I made the text as long as in our tool, the whole graphics just disappeared.
The text labels for tick values of axes, both horizontal and vertical, cannot currently be wrapped across multiple lines. The best you can do is arrange that there is more space for the labels by using a combination of the width and chartArea: { width and left } options, for the vertical axis, or height and chartArea: { height and top } options.
Here is a jsfiddle that demonstrates this: http://jsfiddle.net/dlaliberte/cNRn3/ with a bar chart. The key option is this:
chartArea: { left: 300 }
I tried to decrease the font size and it worked for me. adjust font size according to your need, making font small will make it automatically multi-line
<Chart
chartType='ColumnChart'
width="100%"
height="800px"
data={this.state.graphData}
options={{
fontSize: 11
}}
/>

Categories

Resources