Hoe to avoid labels overlapping on line chart?

1,454 views
Skip to first unread message

Haris Pathan

unread,
Jun 16, 2017, 7:24:45 AM6/16/17
to Google Visualization API
I am creating a stacked Line chart and need to show the label inside the stack. But Few of the label's are getting overlapped. Can any one Help me to resolve overlapping. I have visited How to avoid overlapping label's on the Bar in google bar charts? but that is not working for my code.

Thanks in advance!

<html>
<body>
<!--- Chart Data --->
<div style="width: 100%; float: left;text-align:center; margin-top:15px; background:#ffbc49 !important; color:#4e5257 !important; font-size:25px; font-weight: 800; margin-bottom:0px;  line-height:70px;">sdjskdj</div>
<div class="add_more_chart240 chart_list" id="add_more_chart240" style="margin: 10px 10px; width:calc(100% - 20px); float: left; border: 1px solid #757575;">
 <div class="forlegend col-md-12" style="display:none">
 <input type="text" class="form-control lenendname"  placeholder="Legend Name" value="sdsjdsk">
  <input type="text" class="form-control lenendname"  placeholder="Legend Name" value="L2">
  </div>
  <input type="hidden" class="form-control y_series_col" min="2" max="4" placeholder="2" value="2" id="y_series_col" />
  <input type="hidden" class="form-control x_series_col" min="2" max="10" placeholder="2" value="5" id="x_series_col" /> 
   <!--Graph start-->
   <div id="curve_chart240" class="curve_chart" style="width:95%; height: 430px; margin:0 auto;"></div>
   </div>
   <!--Graph end-->
   <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
   <script type="text/javascript" src="https://www.google.com/jsapi">  </script>
   <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);

        function drawChart() {
        	$.each($('.chart_list'), function() {
        		var class_name =  this.id ;
        		var y_col = 2;
        		var x_col = 5;
        		var data = new google.visualization.DataTable();
        		var legend_label = [];
        		$("#"+class_name).find('.forlegend :input').each(function(e){	
        			legend_label.push(this.value);
        		});
        		data.addColumn('number', '');
        		for(var i = 1;i<=y_col;i++)
        		{
        			data.addColumn('number', legend_label[i-1]);
        			data.addColumn({type:'number', role:'annotation'});
        		}
        		data.addRows([[1,50.1,50.1,83.4,83.4],[2,49.3,49.3,50,50],[3,80,80,90,90],[4,17.5,17.5,23.3,23.3],[5,91,91,13.3,13.3]]);
        		var options = {
        			isStacked: true,
        			annotations: {
        			  textStyle: {
        				fontSize: 15
        			  },
        			  stem: {
        					length: 16
        			  },
        			},
        			title: 'sdjskdjk',
        			//displayAnnotations: true,
        			legend: { position: 'bottom', alignment: 'middle' },
                    pointSize: 5,
        			vAxis: {
        				title:"% score",
        				viewWindow: {
        				  max:100,
        				  min:0
        				}		
        			},
        			 hAxis : { 
        				textStyle : {
        					fontSize: 20 // or the number you want
        				}
        			},
        			colors:['#52B183','#53D2F8','#B573AF','#D7E542'],
        		  };
        		var dynamic_id = class_name.replace('add_more_chart','');
        		var chart = new google.visualization.LineChart(document.getElementById('curve_chart'+dynamic_id));
        		chart.draw(data, options);
        		
        });
        }
        </script>
    </body>
    </html>
Reply all
Reply to author
Forward
0 new messages