Highchart tree nodes text overflow #5

Naveencheekoti · 2018-12-17T10:20:04Z

I am trying to implement the node size adjustments which should be according to the inline text. But I am facing text spill over issue within the node. Please provide me inputs on how to proceed.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Highcharts.Tree with JSON</title>  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.4.js"></script>  
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css"/> 
<style>
	text.highcharts-title{display:none;}
	tspan{font-size:10px;font-weight:normal;}
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgit.com/skorunka/highcharts.tree/master/dist/tree.js"></script>
<script src="https://rawgit.com/skorunka/highcharts.tree/master/dist/highcharts.tree.js"></script>
<div id="tree" style="margin: 20px; min-height: 300px; min-width: 700px;"></div>
 <script type="text/javascript">	
	var treeData = [{"id":1453,"parentId":null,"content":{"title":"Sales per Household - VIKRAM 2015 MARCH ","data":["9:Starting"]}},{"id":1455,"parentId":1453,"content":{"title":"House Holds - RAM 2015 MARCH","data":["2:Completed"]}},{"id":1457,"parentId":1453,"content":{"title":"Sales per Household 2018","data":["1:Queued"]}},{"id":1454,"parentId":1453,"content":{"title":"House Holds - ABC 2015 APR","data":["6:In Progress"]}},{"id":1456,"parentId":1453,"content":{"title":"House Holds - RAM 2016 MARCH","data":["4:Completed"]}},{"id":1455,"parentId":1456,"content":{"title":"House Holds","data":["1:Error"]}},{"id":1457,"parentId":1456,"content":{"title":"House Holds - GHI 2017","data":["0:Completed"]}},{"id":1458,"parentId":1454,"content":{"title":"House Holds - HRQR 2018","data":["1:Completed"]}},{"id":1459,"parentId":1454,"content":{"title":"House Holds-2019","data":["3:Completed"]}}];	
	var treeChartData = { tree: treeData, legend:{ enabled:false }};		
	var chart = Highcharts.chart('tree', {
		chart: {
				type: "tree",				
				config: { currencySymbol: "$", currencySymbolOnLeft: true }				
			},
			series: [{ data: [treeChartData]}],
			title: { text: false },
			credits: { enabled: false },
			exporting: { enabled: true }
	});		
</script>
  
  
</body>
</html>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Highchart tree nodes text overflow #5

Highchart tree nodes text overflow #5

Naveencheekoti commented Dec 17, 2018 •

edited

Loading

Highchart tree nodes text overflow #5

Highchart tree nodes text overflow #5

Comments

Naveencheekoti commented Dec 17, 2018 • edited Loading

Naveencheekoti commented Dec 17, 2018 •

edited

Loading