I have a highcharts-angular organizational chart where when there are a lot of nodes in the chart, the boxes get smaller and their text is hidden. How can I make the chart expand (and a horizontal scrollbar to show) as much as needed so everything will be fully visible?
you can see an example here.
my chart options are these
chartOptions: Highcharts.Options = {
chart: { inverted: true },
title: { text: null },
tooltip: {
useHTML: true,
padding: 10,
style: { fontStyle: 'normal' },
outside: true,
distance: 30
},
series: [
{
type: 'organization',
name: null,
keys: ['from', 'to'],
data: [],
nodes: [],
colorByPoint: false,
color: 'white',
borderColor: '#c1c1c1',
}
]
};
and the html
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
style="width: 100%; height: 100%; display: block;"
></highcharts-chart>
Set chart.width property to the appropriate value for you and change the default overflow style for the chart container.
JS:
chart: {
width: 2000,
...
},
CSS:
#container {
overflow: scroll !important;
}
Live example: https://jsfiddle.net/BlackLabel/t3b9fren/
API Reference: https://api.highcharts.com/highcharts/chart.width
Related
I'm making a Highcharts treemap with some rather long datalabels. Sometimes they wrap, sometimes highcharts truncates them with ellipses (but it really seems like it could wrap them instead). The inconsistency makes it look a bit messy. Is there a way I can force the labels to always wrap?
Here is an example:
Highcharts.chart('container', {
colorAxis: {
minColor: '#003A85',
maxColor: '#F7F8FA',
visible: false
},
series: [{
type: "treemap",
layoutAlgorithm: 'strip',
layoutStartingDirection: 'horizontal',
dataLabels: {
align: 'left',
verticalAlign: 'top',
x: 5,
y: 5,
style: {
textShadow: 'unset',
textOutline: 'none',
fontSize: '14px',
fontWeight: 'normal',
}
},
data: [{
name: 'This is quite a long sentence really, oh well never mind',
value: 4911,
colorValue: 0
}, {
name: 'This is quite a long sentence really, oh well never mind',
value: 3701,
colorValue: 1
}, {
name: 'This is quite a long sentence really, oh well never mind',
value: 3602,
colorValue: 2
}, {
name: 'This is quite a long sentence really, oh well never mind',
value: 3502,
colorValue: 3
}, {
name: 'This is quite a long sentence really, oh well never mind',
value: 3114,
colorValue: 4
}]
}],
plotOptions: {
treemap: {
borderWidth: 0,
dataLabels: {
borderRadius: 0,
shadow: {
enabled: false
}
}
}
},
title: {
text: 'Highcharts Treemap'
}
});
#container {
min-width: 300px;
max-width: 400px;
margin: 0 auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>
(image) Highcharts treemap with inconsistent label wrapping
More complex way to control text wrapping can be achieved when combined with the option for datalables, useHTML: true and displaying dataLabels.format as a string you can add your styles and customization there.
plotOptions: {
treemap: {
dataLabels: {
useHTML: true,
format: '<p class="truncate"><b>{point.name}</b></a>',
style: {
textOverflow: 'allow'
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/zkwg2vnq/
How do I prevent labels from wrapping in Highcharts styled mode? A partial solution that I found is to use the useHTML flag and set white-space: nowrap; with css, but then the labels are rendered on top of the tooltip. If I set useHTML to false, then highcharts automatically adds line breaks. I've included a code snippet to illustrate the problem. Just run the snippet and hover your mouse over the bottom bar.
Highcharts.chart('container', {
chart: {
type: 'bar',
borderWidth: 1
},
title: {
text: 'No space reserved for X axis labels'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
categories: ['Product 1', 'Product 2', 'Yet another product with a long label'],
labels: {
rotation: 0,
align: 'left',
reserveSpace: false,
x: 2,
y: -5,
useHTML: true
},
tickWidth: 0
},
series: [{
data: [39.9, 71.5, 50.4],
dataLabels: {
enabled: true
}
}]
});
#import 'https://code.highcharts.com/css/highcharts.css';
.highcharts-axis-labels span {
white-space: nowrap!important;
}
<script src="https://code.highcharts.com/js/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
To make it work with styled version of Highcharts, you can wrap addLabel function of Tick prototype. Take a look at the example below.
Example:
http://jsfiddle.net/vsy8abLb/
I was trying to implement progress-bar/status-bar in highchart, need to show 2 colors for the progress bar/status bar one background color and another color for status/progress, achieved using stacking bar in highchart but first rectangle in that
have white stroke color so it differentiating 2 rectangles but i need to show it as single rectangle instead of 2,Is there anyway to remove that white stroke color to show as single one.
<html>
<head>
<script src="highchart.js"></script>
</head>
<body>
<div id="container" style="min-width: 100px; max-width: 200px; height: 50px; margin: 0 auto"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'bar'
},
xAxis: {
tickColor: '#FFFFFF',
tickWidth: 1,
categories: [''],
labels:{
enabled: false
},
visible:false
},
title:{
text:''
},
yAxis: {
gridLineColor: '#FFFFFF',
minorGridLineWidth: 0,
lineColor: '#FFFFFF',
gridLineWidth: 0,
title: {
text: ''
},
labels:{
enabled: false
},
visible:false
},
exporting: { enabled: false },
legend:{
enabled: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
enabled: false
},
colors:['#999999', '#8BF30D', '#FFFFFF'],
series: [
{
name: '',
data: [1]
}, {
name: '',
data: [5]
},{
name: '',
data: [0]
}]
});
</script>
</body>
</html>
I think that you should be able to use borderWidth parameter that is described in Highcharts API:
http://api.highcharts.com/highcharts/plotOptions.column.borderWidth
plotOptions: {
series: {
stacking: 'normal',
borderWidth: 0
}
},
When you will use this parameter you will be able to eliminate white border from your columns. I have made an example how your chart will work using this option:
http://jsfiddle.net/rvj65mor/1/
I'm trying to add a custom label to a highcharts pie chart. The label is going to (eventually) be center, bottom aligned and display some html data. The problem is the label does not show on the chart, trying to use 'renderer'. I'm quite new to highcharts, what am I doing wrong?
$('#div_graph_0_1').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
credits: {
enabled: false
},
title: {
text: 'NEW VISITORS'
},
subtitle:{
text: pieSubtitleTotal,
style: { color: '#f07600' }
},
tooltip: {
pointFormat: '{point.y}'
},
plotOptions: {
pie: {
states: {
hover: {
halo: {
size: 9,
attributes: {
fill: '#f07600'}
}
}
},
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
connectorWidth: 0,
enabled: true,
format: '{point.y}',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
}
},
series: [{
name: 'New',
colorByPoint: true,
data: [{
name: 'Repeat',
y: subtitleTotal,
color: '#fff',
borderColor: '#f07600',
borderWidth: 2
}, {
name: 'New',
color: '#f07600',
borderColor: '#f07600',
y: pieTotalVisitors,
sliced: true,
selected: true
}]
}],
navigation: {
buttonOptions: {
enabled: false
}
},
function(chart) { // on complete
chart.renderer.text('This text is <span style="color: red">styled</span> and linked', 0, 0)
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
}
});
You're on the right track, as your rendered text IS there and present on the chart. What you needed to define was the expected X and Y values where you wanted the text to be placed.
I discovered this because of the "y" in "styled":
If you define a different y value in your renderer.text call, say, 100, you get this:
Here is the syntax you should follow:
chart.renderer.text('Your text', X_VALUE, Y_VALUE)
In my above example, I set your text to:
chart.renderer.text('Your text', 0, 100)
... which puts it 100 pixels down from the top of the chart.
You're going to have to define these values manually; there's no out-of-the-box way to say "bottom-aligned, center-aligned." To make this more versatile, what you could do is capture the height and width of your container div and calculate the x and y values that way.
You can do this by fixing the height and width of your chart in a stylesheet declaration, defining JavaScript variables outside your chart options, and then calling those variables from the renderer.text declaration:
// in your inline stylesheet
#container: { width: '650px', height: '450px' }
// variables defined before your chart options
var chartHeight = $('#container').height();
var chartWidth = $('#container').width();
// in your renderer code
chart.renderer.text('Your text', chartWidth * 0.5, chartHeight - 100)
In the above example, your rendered text would start at 50% of your chart's width and 100 pixels from the bottom of your chart.
One point to keep in mind: you mentioned an HTML table. In that case, I'd suggest switching renderer.text to renderer.html. That will allow many more HTML elements to be rendered in the final chart.
I hope all of this has been helpful!
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()
});