How can I remove the gap between Highchart's custom tooltip (created from plotoptions > series > tooltip > pointFormatter and useHTML:true) and the html content, without affecting the tooltip arrow?
If I set the tooltip borderWidth to 0, it removes the arrow along with the tooltip border.
Please refer to the below picture to see the gap between the tooltip border and the actual content:
Got the answer! Simple..
tooltip : {
...
padding : 0
}
Related
Using highcharts, if you create a pie chart with styledMode: true; and you import their highcharts.css file, the hover effect on legend items causes all legend items to go opaque.
Code That Causes It
You can even see this on their demo page by selecting the Styled Mode: Pie.
And then hovering over the legends items. If you set the styledMode: false; and then remove the CSS import it goes away.
My question basically: Is this a bug? It seems like unintended behaviour.
I don't think that it is a bug - it's more like a small difference between styledMode and the regular one, which could be easily fixed by changing the opacity for it.
Demo: https://jsfiddle.net/BlackLabel/pq6omt2y/
CSS:
.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover) {
opacity: 1
}
I want to paint some pie charts with huge legends, but I can't resize the yellow panel in the background of the pieChart.
Is there any way to resize the yellow panel to put the legend below and not resizing the piechart itself?
Piechart without legend:
Piechart with legend:
Here I let you my piechart code (I am using primefaces 4.0):
<p:panel style="width: 600px; height:500px;">
<p:pieChart value="#{pieModel.value}" title="#{pieModel.key}" showDataLabels="true" extender="pieExtender" legendPosition="s" legendCols="6" />
</p:panel>
I have tried to play with panel styles, but it was useless.
EDIT (after kukeltje comment):
I have searched in jqPlot documentation, but I haven't found anything. What are the jqplot properties for changing this panel size. Or maybe I need an extension?. No idea.Please, show me an example... I just found a way to show labels when moused over, and I figured out it could be something similar, but not come upon the background panel size:
<script type="text/javascript">
function pieExtender() {
this.cfg.highlighter = {
show: true,
tooltipLocation: 'n',
useAxesFormatters: false,
formatString: '%s = %d'
};
}
</script>
I have solved the problem defining the style of the chart, and I have to calculate how big will be the legend, bring the width and height to the pieChart component:
This is not the best solution, because it is quite impossible calculate the exactly panel size to keep the pie chart size as without legend, but at least I can keep the pie visible...
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/
In My Code there is requirement when user click on a Bar of a series the CheckBox Style of the Series should be changed to none.But when i do that my Chart Width is increasing. IS there any way we can keep the chart width fix irrespective of legend table width.
Thanks
Akshay
This Can be done
GetLegend().SetResizeChart(false);
GetLegend().SetCustomPosition(true);
GetLegend().SetPositionUnits(muPercent);
GetLegend().SetLeftPercent(83);
GetLegend().SetTopPercent(10);
Set your legend Alignment in bottom for Avoiding width increment of chart as below.
Chart.GetLegend().SetAlignment(laBottom);
if you want custom position of legend (Right side of chart)then you can do as below.
m_Chart1.GetLegend().SetCustomPosition(TRUE);
m_Chart1.GetLegend().SetPositionUnits(muPercent);
m_Chart1.GetLegend().SetTopPercent(20);
long leftmargin = 80.0;
m_Chart1.GetLegend().SetLeftPercent(leftmargin );
m_Chart1.GetPanel().SetMarginRight(100-leftmargin+1);//for avoiding overlapping of legend and chart
Also you can finetune your legend and chart by modifying above value
I created a line chart, and added a button whose click method make the line thicker (lineWidth 7pt). However, each time I mouse over the line or the legend, the line restore to its original width (which I believe is 2 pt). So I added the following plot options to disable the "hover" function:
line: {
states: {
hover: {
enabled: false,
}
}
},
But it only resolves the issue partially -- after I set lineWidth to 7 pt using the button, the line width will still be reset to its original 2 pt after I mouse over the legend or move mouse across the plotting area.
I have shared my example here. Can anyone help me figure out how to prevent resetting the line width after changing its width to 7 pt?
Thanks in advance!
Alex.
You can use
series.update({
lineWidth:10
});
http://jsfiddle.net/QNPYP/2/
http://api.highcharts.com/highcharts#Series.update()