I have created a few charts using highcharts by setting the width of chart to a fixed value of 400px for the normal browser to be used, however, on iPad , the charts get distorted, any pointers for this?
added following to css
.highcharts-container{width:100% !important; height:100% !important;}
Related
I've just updated from Highcharts V6.1.1 to the latest (V7.1.2) and now I have an issue where charts are not correctly scaled width wise when contained in a css transform scale.
The JSFiddle below shows the problem (apologies for the small images, they're scaled to show the problem).
Using V6.1.1 (uncomment in fiddle) works correctly;
Whereas using latest, V7.1.2, the chart does not fill the container;
https://jsfiddle.net/mattscotty/L4fo02uk/
#outerContainer {
transform: scale(0.315395);
transform-origin: left top;
}
That issue is a Highcharts bug reported here: https://github.com/highcharts/highcharts/issues/10782
As a workaround, set chart.width property to the same value as the container width:
chart: {
width: 800
}
Live demo: https://jsfiddle.net/BlackLabel/wtf75o9s/
API Reference: https://api.highcharts.com/highcharts/chart.width
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%
}
I am having some trouble getting the Tooltip for a series to not exceed a fixed width. I would like to tooltip for the Notes to not exceed a certain width, but I don't want it to be a fixed width.
Here is a jsfiddle example. http://jsfiddle.net/mnucci/hsBSV/
If you mouse over the second note at the top, it will be way too wide.
I am also having a problem getting the tooltip to honor the useHTML flag or the Formatter function.
I also tried using a style setting like
.highcharts-tooltip span {
width:140px;
overflow:auto;
white-space:normal !important;
}
but this fixed the width to 140 even when there were only 10 chars and I don't want all tooltips to inherit this, only the note series.
You need to set useHTML as true
http://jsfiddle.net/hsBSV/1/
I fixated the two first left columns in my tables based on https://stackoverflow.com/a/17557830/1272712. The columns is only fixated, when the screen size is less than 768px - at which point the table is scrollable (see jsFiddle). It works great on Android, desktop Chrome and desktop Safari, but it doesn't work on iOS Safari and Chrome. Does iOS not support position:absolute?
If anybody else have any alternative implementations, I'll accept that as an answer.
http://jsfiddle.net/98hk3/
I was able to get this working by overriding the -webkit-overflow-scrolling property to be unset.
I believe it defaults to touch in iOS which for some reason was throwing off the position:absolute I was trying to set.
I think you have stuck in min-width problem,
I will say that its simple to solve this in case you will convert pixel to em,
if you base size is 16px (by default it is same in all browsers)
then your PX to Em will be (px)768 / 16 = 48(em)
Now try changing Px to Em in the code Fiddle 0
also if you must stay with PX, then do something like this,
#media(max-width:768px !important)
fiddle 1
or
#media(max-width:99%)
Fiddle 2
Note:I suggest we keep 1 or 2 % spare(by applying 99%) because if we have applied padding some where within body that will create overflow to top level.
Also try adding zoom:1; under .table-responsive class that might help in case of iOS fiddle 3
if this does not work out please reply..
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/