I am using the Google Visualization API to generate some pretty simple bar charts. The only slight complication is that the labels can be very long. The client is fine with them truncating but wants to give the chart a little more space.
Try as I might, I cannot find a way to increase the distance from the labels to the chart area! The irritating things is that if the labels are all short, the padding is fine; as soon as they get long, they all right align right up to the chart before truncating.
I've tried various chartArea.width / chartArea.left combinations, no joy; tried adding padding and margins to the vAxis.textStyle in the hope that the documentation is just incomplete; no joy.
I cannot believe that with all the other trillions of configuration options there is no way to increase label padding!
Fiddle:
http://jsfiddle.net/9v6os5x6/2/
EDIT: What it looks like it is doing is either calculating a decent padding for labels that fit and then not compensating for the ellipsis, or leaving a space that is exactly one ellipsis wide when drawing non-truncated labels, because if you set all labels to be short then just increase one, what it looks like it is doing is filling the gap of the truncated one with the ellipsis, then aligning all the others.
This is much easier to see by fiddling with the fiddle than it is to explain in words :)
Related
I'm trying to add a margin to my chart from the right, so that the final point is not chopped as shown here:
last point
Code demo: codepen
Solutions I've tried so far:
Setting the offset, which works but it has too much of a margin, to the point where it's not readable on mobilephones
Setting the bounds: 'ticks' option, which works, but when the data is spread among a small timeline, the graph is super crunched up
The following solution seems like the golden answer, however it is not suitable for v2.7.3
Any help is appreciated, Thanks!
I'm showing percentage values inside my chart columns but some of the labels overlap when the values are very small and are hard to read. I tried adjusting the font size but it's not helping. How can I show these labels without any overlap? Screenshot below.
I'm afraid there's very little that can be done as the library doesn't have any strategies to automatically avoid overlap outside of hiding the labels if there's not enough room by default with the default false setting for showAllValueLabels.
You can try tweaking the graph objects' labelOffset property to shift the text up to see if that helps, but that's all you can do on the label side of things.
Alternatively, instead of using labels, just rely on the chart balloons that appear when hovering over the column. You can also enable the chartCursor, which shows all balloons within a category/date instead of just one of the balloons and they won't overlap. You can adjust the cursor's visibility and appearance as well.
I'm new to this D3/C3 thing and had a project thrown my way w/ limited time to work on it and was wondering how one would go about adding vertical thresholds on top of horizontal bars as shown in the image below, using C3 / D3 charting libs.
I've got it looking pretty spot on except for that part. Any input would be helpful (if it was meant to be helpful that is).
I have a temperature line graph, and I want to draw a red vertical line when the two temperatures (surface temp and dew point) cross. So far what I do is I draw a vertical rectangle on top of my graph at places I calculated it crosses.
It works correctly, but there are a few downsides to this :
The line kind of stands out of the graph ... we can tell I added it later and not in the graph itself;
The pixels are hardcoded, if I change the graph width it might not be good (I could probably fix this, but still)
I would like a little tooltip when I highlight a line, but since it's a simple rectangle, it just sits there and is not dynamic at all.
What would be my best option to integrate this line better un my graphs?
Thanks!
plotLines are your best way to draw the line - http://api.highcharts.com/highcharts#xAxis.plotLines
Two things:
1) The difficult part will be calculating where the lines cross. if they do not cross at a data point, which they most likely won't, there will need to be some guesswork involved, as there is no value you can retrieve from the chart to tell you the axis value where they cross.
2) if you are using separate y axes for these two series, which I assume you must be since they are completely different units and scales, then the point where the lines cross will be COMPLETELY arbitrary and meaningless, as where they cross will be strictly a matter of how the scaling for each axis is set up, and the values have no actual correlation to each other.
Looking through the documentation for Highstocks, I found this example:
Shown here is two series on the same chart, therefore with a linked range selector - this is really really useful, but I wish to display something different which is proving to be very difficult.
What I'm looking for is a normal line graph on the top series, representing data plotted onto time (almost like in this example), but a bar chart or horizontal candle chart in the lower graph, representing one or more timelines.
I've drawn an image of what I'm looking for:
I apologise for the crude drawing, but hopefully it shows what I am aiming to achieve: standard graph on top, bar/candle on bottom.
I have attempted various techniques to render this, but I can't find a way to have both series drawn on the same timescale, linked with the same range selector.
In case it helps, here's a starting point on JSFiddle, with all the unnecessary code removed: http://jsfiddle.net/g105b/8JhXv/
and a link to the original demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
Answer taken from official Highcharts forum
it is possible, but with some limitations. In the fact you want to show gantt chart. Bar charts aren't possible in your case - bar chart = inverted whole chart (yAxis becames xAxis, etc). Instead take a look at example for gantt chart: http://jsfiddle.net/highcharts/r6emu/
You can combine them into one, ane effect: http://jsfiddle.net/8JhXv/1/
About limits:
tooltip fo bottom chart is availabe only when you mouseover start and end date
bars are on lines, not between them