I am creating a radar chart with high chart and found that one of the labels, Thinking is missing a T after rendering.
Is there anyway I can do to avoid that? My expected solution is to shrink the main chart a bit smaller to fit the outside container. But can we do that automatically? because the outside container varies as the browser resizes (some times even on mobile).
Thanks for any kind of tips!
You can set proper width using min-width and max-width properties of chart container. min-width should be set so that your whole chart is visible. For example:
<div id="container" style="min-width: 600px; max-width: 700px; height: 400px; margin: 0 auto"></div>
See also highchart spider example
Related
I am looking at making an animation using auto-animate and 2 slides.
The animation is made of 5 images.
Using <image> stack me the images on an horizontal line .. using divs stack them vertically.
I would like the second slide to arrange the images on a diagonal.
The best for me would be to position the images freely but I don't know how to do that :( ?
To position an item in CSS, try this:
<style>
#image1 {
position: absolute;
top: 100px;
left: 100px;
}
</style>
<img src='my-image.jpg' id='image1'/>
See https://www.w3schools.com/cssref/pr_class_position.asp for more details.
:)
I encountered a very strange highcharts behaviour.
I am rendering the same chart in two containers with only one px difference in height:
<div id="container" style="min-width: 310px; height:118px; margin: 0 auto"></div>
<div id="container2" style="min-width: 310px; height:117px; margin: 0 auto"></div>
The first graph renders the y-axis to 100 and adds unnecessary extra space. The second graph aligns the axis to use only as much space as necessary.
Here's a link to a fiddle:
https://jsfiddle.net/647cg3mp/
Any idea where this extra padding comes from all of a sudden?
That behavior is related with tickInterval and tickPixelInterval properties. You can change it for example by increasing tickPixelInterval or by setting tickAmount to 2.
tickInterval: number
The interval of the tick marks in axis units. When undefined, the tick interval is computed to approximately follow
the tickPixelInterval on linear and datetime axes.
yAxis: {
tickPixelInterval: 73,
...
}
Live demo: https://jsfiddle.net/BlackLabel/do46qhgx/
API Reference:
https://api.highcharts.com/highcharts/yAxis.tickPixelInterval
https://api.highcharts.com/highcharts/yAxis.tickInterval
I ran your fiddle. At first I didnt know what you meant by padding but will deduce you are referring to the range of the y-axis: it's different for the two divs. You can explicitly set the max of the y-axis range in your params,
"yAxis": {
"min": 0,
"max": 100,
which would resolve your problem, in the sense that the two charts would use the same range. As a working solution, you could query the data to determine what the max would be in for any situation, and then round to 50 increments or another suitable increment based on your needs, then use that as the max.
It is possible for highcharts to perform responsively, as seen in this fiddle.
It seems that lazy_high_charts defaults to width: 600px; height: 400px; when no width or height is supplied. Is there a workaround?
set height only will do the trick
LazyHighCharts::HighChart.new('graph', :style=>"height:260px")
if you preferer you can set width with percentages
I created Solid Gauge chart using Highchart.
but when screen resolution changed chart is still displayed with original size.
i need responsive Solid Gauge chart.
Demo Link
The solid gauge chart handles size changes quite well by itself. I've updated the demo JFiddle to show how the gauge can handle resizing.
The main idea here is that when the window is resized, the width of the div is changed by CSS:
<div id="container-speed" style="width: 50%; float: left"></div>
And the height of the div is changed by JS:
function setDivHeight() {
var div = $('#container-speed');
div.height(div.width() * 0.75);
div = $('#container-rpm');
div.height(div.width() * 0.75);
}
$(window).on('load resize', function(){
setDivHeight();
});
Note that the ratio between width and height for the gauge seems to be ideal at 4:3, which is why the code multiplies by 0.75 to set the height.
Managing the text elements will be CSS/JS/HTML positioning and resizing of your choice, depending on how many screen sizes you wish to handle.
Following solution manages responsivity in both vertical and horizontal direction. Furthermore, it does not require additional JS to resize the container div.
Check this fiddle:
https://jsfiddle.net/istibekesi/bm3d1zng/
Highchart sets the height of the chart to 400px by default.
So the trick is to set the height of the chart by percentage:
#container-speed {
height: 180%
}
When putting multiple charts tooltips from upper charts are hidden behind others.
I found some tips on how to it but nothing helped.
Is there anyway to keep tooltips on top of charts?
The example is here: http://jsfiddle.net/Zw3uM/
Thanks a lot!
This is pure html : Any div element loaded after ( meaning appearing after on the html page) will always be in front.
In order to get the first chart tooltip be in front of the second : load the second in first and set its y position on the page using an absolute or relative position in css :
I've change their order, putting the container2 in first in html:
<div id="container2" style="height: 200px"></div>
<div id="container1" style="height: 200px"></div>
Then set the position of container2 to be under the first one (thanks to the top style attribute) :
div[id="container2"] {
position:absolute;
top:200px;
}
Here is the result : http://jsfiddle.net/Zw3uM/3/
You can use tooltip pisitioner:
http://api.highcharts.com/highcharts#tooltip.positioner
The problem is due to each highchart container having its own stacking context. This is because the highcharts-container has both position: relative and z-index: 0 (css dynamically applied by the highcharts library).
So the z-index of the tooltip has meaning only in its parent highchart container.
To fix this we need to override the (z-index: 0) rule for the highcharts-container using the following:
.highcharts-container
{
z-index: auto !important;
...
}
This way all hightcharts-containers & their children would share the same stacking context and their z-indices would apply the desired effect.
You can check the fix here: http://jsfiddle.net/w5bLo1cw/4/