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/
Related
I am using highchart's pie chart to display my data. But i am having some problem on setting the height of the sub-title. I am displaying my chart in a div named container(<div id="container></div>). However, the height i have to set is inside that div which is set by highchart itself. My subtitle is quite long and is not fully displayed in the chart.
I have made the js fiddle of my issue below:
http://jsfiddle.net/Simron_Thapa/eezpjaav/
You can explicitly bump up the height of the created highcharts-container:
var elem = $('.highcharts-container');
elem.css('height',elem.height() + 200); // increasing it by 200px
Updated fiddle.
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 have two bar charts, drawn using highcharts library, on a single page. I need to maintain same width for bars and same spacing between bars in a group, across these charts. Size of container is different across the charts and fixed as per the UI layout.
Snippet of plot options:
series: {
grouping:true,
groupPadding:0.12,
borderWidth: 0,
events: {
legendItemClick: function () {
return false;
}
}
}
I have tried various combinations and a jsfiddle link is here - http://jsfiddle.net/U6mhy/29/
In the above link, though the bar width is same between the two charts, spacing between bars in a single group is not same. In fact, bars in chart1 hardly appear to be grouped.
I have tried specifying different values of groupPadding, pointPadding and pointWidth but unable to achieve consistent spacing between bars across these charts.
Please suggest if any other combination of options can help me achieve this.
-Thanks
Just to make it clear, you can use one of (not both):
pointWidth: forces Highcharts to draw bars with fixed width,
pointPadding + groupPadding: calculates width of the bar according to these values and chart width/height
Just think about this: how to set the same width of the bar for all charts when you have different number of bars? And the answer is to change charts' width according to number of columns. For example you have 4 bars? Chart height/width will be sum: 4 x 10px + some_padding. If you have 10 bars, when height/width will be: 10 x 10px + some_padding (the same as above). I hope that's what you want to achieve.
I have an issue with a HighCharts pie I've created. Sometimes the tooltip text overlaps with the legend, so I had to increase the legend's y property. However, this is causing parts of the legend (it's horizontal with 4 rows) to become partially hidden. I've tried adjusting the height property of the container, as well as a bunch of other properties, but the problem never goes away...
Here's how it looks like:
http://imgur.com/YOPjoXG
Any help is much appreciated.
If you are fine with pagination in legend then fix the height of the legend with maxHeight.
if the legend overflows, then pagination appears automatically.
legend: {
maxHeight: 30,
}
here is a working fiddle for pagination http://jsfiddle.net/cEcRz/
hope this is what you are looking for.
You can use pagination but in exporting add custom options to the legend like here:
http://jsfiddle.net/cEcRz/1/
exporting:{
chartOptions:{
legend:{
layout: 'horizontal'
}
}
},
Obviosuly you need to adapt other parameters like size etc.
am using jquerymobile for representing a two column radiobuttons in my project, the problem am facing is the contents of the block-a is lengther than the contents of the block-b so am getting a difference of div size the output is at (http://i40.tinypic.com/r0tt85.png) if u can lookat my out put the second question 6th option is small when compare to all the other ones the block size is based on the content how can i make same size for all the blocks without based on the content any help please needed
If you want all blocks to be the same height, you can set the height in CSS:
.ui-bar {
height: 100px !important;
}