Related
I have created a Pie chart and I am placing this Pie chart inside a panel. My panel width can be 600 or 400 depending on the user settings. When the size is 600 Pie and the legend is displayed properly. But when it is 400, the legend is displayed outside of the panel. Is there a way to reduce the size of the pie in that case, also the legend can be displayed at the bottom if the size is not sufficient.
My plnkr
https://plnkr.co/edit/yzXLz7AIDoWa1Pzxxl4k?p=preview
My plot options
plotOptions: {
pie: {
innerSize: 120,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true,
states: {
hover: {
halo: {
size: 0
}
}
}
}
},
Response code:
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'top',
layout: 'horizontal',
labelFormatter: function () {
return '<div style="width:180px"><span class="pull-left" style= "font-weight: 500; padding-bottom: 5px; font-family:Helvetica ">' + this.name +
'</span><span class="pull-right" style= "font-weight: 500" >' + this.value +
'</span></div> ';
}
},
pie: {
size: 100,
innerSize: 40
}
}
}]
}
I have a custom HighCharts that have totals in the legend. I need to add one line of custom text centered under the totals "in the legend". Also I need to add text center at the bottom of the chart "under the legend".
See fiddle:
http://jsfiddle.net/no1uknow/cvsTB/
[EDIT]
I did figure this much out but don't know how to get text centered under legend.
http://jsfiddle.net/no1uknow/cvsTB/1/
$(function () {
var chart;
$(document).ready(function() {
var container_chartFreqAtaTailNum = new Highcharts.Chart({
chart: {
renderTo: 'container_chartFreqAtaTailNum',
type: 'bar',
height: 795
},
title: {
text: 'Frequency by Tail Number'
},
subtitle: {
text: 'Fact ATA (25)'
},
xAxis: {
categories: ['235','245','402','411','432','442','493','703','714','720','730','745','756','767','772','792'],
title: {
text: 'Tail Number'
},
labels: {
style: {
width: '12000px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Count',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+ this.series.name +': '+ this.y +' Count';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
pointWidth:10,
groupPadding: .05,
shadow: true
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true,
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa"> Total: ' + this.options.total + '</span>';
}
},
credits: {
enabled: false
},
exporting: {
enabled: true
},
series: [{
name: 'Heavy',
total: '5421',
data: [117,102,698,640,251,115,269,279,260,309,328,427,316,754,239,317]
},{
name: 'Intermediate',
total: '4888',
data: [299,169,448,532,210,256,241,295,226,368,319,420,272,243,313,277]
},{
name: 'Line',
total: '659',
data: [29,38,50,47,33,27,22,67,57,44,36,53,41,37,35,43]
},{
name: 'Lite',
total: '2172',
data: [101,116,139,124,123,139,148,249,168,141,122,136,91,154,105,116]
}]
});
});
});
spacingBottom is what you need to add, and also you need to take care of the offset:
chart: {
events: {
load: function () {
var label = this.renderer.label("How do I move this center and under the legend.")
.css({
width: '450px',
color: '#222',
fontSize: '16px'
})
.attr({
'stroke': 'silver',
'stroke-width': 2,
'r': 5,
'padding': 10
})
.add();
label.align(Highcharts.extend(label.getBBox(), {
align: 'center',
x: 0, // offset
verticalAlign: 'bottom',
y: 50 // set the right offset
}), null, 'spacingBox');
}
},
renderTo: 'container_chartFreqAtaTailNum',
type: 'bar',
height: 895,
spacingBottom: 100 // The space between the bottom edge of the chart and the content (plot area, axis title and labels, title, subtitle or legend in top position).
}
Here is the fiddle: http://jsfiddle.net/uMBHf/1/
I am using Highcharts to generate a pie chart. It is generating it fine but the problem is that I have a fixed area to display the chart and the tooltip has large amount of text.
The tooltip is too large to fit inside the chart div, how can I fix this?
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'ER_inpatient_stay',
plotBackgroundColor: null,
plotBorderWidth: null,
marginTop: 0,
plotShadow: false,
backgroundColor: 'none',
},
legend: {
layout: 'vertical',
align: 'left',
borderColor: '#fff',
itemMarginTop: 30,
verticalAlign: 'top',
x: 70,
y: 0
},
title: {
text: ''
},
tooltip: {
userHTML: true,
style: {
padding: 10,
width: 250,
height: 60,
},
formatter: function () {
return this.point.residents;
},
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
formatter: function () {
return this.point.y;
},
color: 'white',
distance: -10
},
showInLegend: true,
tooltip: {}
}
},
series: [{
type: 'pie',
size: 80,
name: '',
data: [{
'name': 'E/R Visits',
'y': 1,
'residents': "fMonroe Monroe",
'color': '#FA3D19'
}, {
'name': 'Inpatient Stay',
'y': 21,
'residents': "fGinanni Ginanni, fJobs Jobs, fMonroe Monroe, fDickerson Dickerson, fBrown Brown, fHerter Herter, fDavidson Davidson, fFernbach Fernbach, fGentry Gentry, fJones Jones, fKostic Kostic, fnewresident lnewresident, fLogger Logger, fMaxwell Maxwell, fMcGuire McGuire, fMiller Miller, fO'Farrell O'Farrell, fProgram Program, fProgram2 Program2, frer rer",
'color': 'orange'
}]
}]
});
});
})
Fiddle: http://jsfiddle.net/faridu86/syrF6/
Please take look at the workaournd with using CSS
.highcharts-container {
overflow: visible !important;
}
.tooltip {
position: relative;
z-index: 50;
border: 2px solid rgb(0, 108, 169);
border-radius: 5px;
background-color: #ffffff;
padding: 5px;
font-size: 9pt;
}
http://jsfiddle.net/G4NLn/8/
There's the solution that worked for me, inspired by Sebastian's one :
.highcharts-container,
.highcharts-container svg {
overflow: visible !important;
}
Only takes care of the overflow though, you still need to clip the content of the tooltip.
Issue has been resolved for me, by changing the svg and highchart-container size dynamically as following
$('.highcharts-series-group').mouseover(function(){
setTimeout(function() {
$('.highcharts-tooltip').css({'height': 'auto !important'});
var tspans = $('tspan').length;
var svg_height = 150;
if( (tspans * 16 ) > 150 ){
svg_height = tspans * 16;
}
$('.highcharts-container').css({'height': svg_height+'px'});
$('svg').height(svg_height);
},100);
});
fiddle : http://jsfiddle.net/faridu86/syrF6/2/
I used the answer bellow but its not working for me. The problem for me is the tooltip is coming normally but when the mouse is out the tooltip doesn't dissapear. Here is my solution and it works fine for me. Hope that it will help
$('.highcharts-series-group').mouseenter(function(){
$('.highcharts-tooltip').css({'height': 'auto !important'});
var tspans = $('tspan').length;
var svg_height = 150;
if( (tspans * 16 ) > 150 ){
svg_height = tspans * 16;
}
$('.highcharts-container').css({'height': svg_height+'px'});
$('svg').height(svg_height);
defect_chart.redraw()
});
$('.highcharts-series-group').mouseleave(function(){
defect_chart.tooltip.hide()
});
I have had these charts built for a couple months, and just today the styles of the legend seem to have shifted about 150px to the left. They were just right-aligned from the pie chart but now render directly over the top of the pie chart and I am unable to figure out why. I can add inline styles to the div's I am creating with margins and padding but that doesn't justify the colored boxes on the legend that correspond with each pie slice. My code/styles have not changed and I do believe this is a functionality issue. Here is my code;
Any help is appreciated.
var options = {
chart:{type:'pie',
renderTo: 'ctl00_ContentPlaceHolder1_Overview1_AssetCategoryChart',
events: {
load: function(event) {
$('#ctl00_ContentPlaceHolder1_Overview1_AssetCategoryChart .highcharts-legend-item').last().append('<br/><div style="width: 200px; margin-left: 170px; height: 2px;">_____</div><br/><div style="width:200px; height: 10px;"><span style="float:right"><b>100%</b></span> </div>');
}
},
spacingTop: 0,
marginTop: 0
},
credits:{enabled: false},
colors:[
'#5485BC', '#AA8C30', '#5C9384', '#981A37', '#FCB319', '#86A033', '#614931', '#00526F', '#594266', '#cb6828', '#aaaaab', '#a89375'
],
title:{text: null},
tooltip:{
enabled: true,
animation: true,
formatter: function(){
return this.point.name + '<br/>' + this.y.toFixed(2) + '%';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
animation: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: false,
formatter: function() {
return this.y.toFixed(2) + '%';
}
}
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
width: 200,
verticalAlign: 'top',
borderWidth: 0,
useHTML: true,
itemMarginBottom: 4,
labelFormatter: function() {
return '<div style="width:180px; margin-left: 150px;"><span style="float:left">' + this.name + '</span><span style="float:right">' + this.y.toFixed(2) + '%</span></div>';
},
title: {
text: 'Category',
style: {
fontWeight: 'bold'
}
}
},
series: [{
type: 'pie',
dataLabels:{
},
data: [
['Real Estate', 12.55],
['Large-Cap Growth', 12.34],
['Foreign Large-Cap Blend', 12.19],
['Large-Cap Value', 7.51],
['Emerging Markets', 6.51],
['Health',5.59],
['Cash Equivalents',5.23],
['Foreign Large-Cap Value',4.02],
['Large-Cap Blend',3.95],
['World Allocation',3.55],
['Mid-Cap Growth',3.29],
['Remaining', 23.30]
]
}]
}
I am using high charts but am experiencing an issue with larger tooltip cropping off at the outer elements of the SVG, as per the image below.
The option useHTML is set to true for the tooltip and xAxis, as I am applying some custom CSS these elements.
Is there a way to have the tooltip not to crop?
My highcharts code looks like this:
return {
chart: {
renderTo: this._chartContainer,
type: 'columnrange',
inverted: true
},
title: {
text: this._getTitle(values)
},
xAxis: {
categories: values.rows.labels[0],
labels: {
formatter: function() {
return '<span class="xAxisTruncate" title="' + this.value + '">'+ this.value +'</span>';
},
useHTML: true
}
},
yAxis: {
max: this._getMax(),
min: this._getMin(),
gridLineWidth: 2,
opposite: true,
tickInterval: 31 * 24 * 3600 * 1000,
type: 'datetime',
dateTimeLabelFormats: {
month: '%b %y'
},
title: {
text: yAxisTitleText
},
endOnTick: false,
labels: {
align: 'left'
}
},
plotOptions: {
series: {
borderWidth: 0,
borderColor: 'transparent',
borderRadius: 5,
groupPadding: 0.05
},
columnrange: {
dataLabels: {
enabled: true
},
animation: false,
colorByPoint: false
}
},
legend: {
enabled: false
},
series: columnRangeSeries,
tooltip: {
enabled: true,
useHTML: true,
formatter: function(){
return this.point.toolTip;
}
}
};
Thanks in advance.
I'm pretty sure, that similar topic exists on stack, however I can't find it. In general it is possible to achieve that using HTML tooltip, see: http://jsfiddle.net/7wVDV/147/
CSS:
.highcharts-container {
overflow: visible !important;
}
.MyChartTooltip {
position: relative;
z-index: 50;
border: 2px solid rgb(0, 108, 169);
border-radius: 5px;
background-color: #ffffff;
padding: 5px;
font-size: 9pt;
}