Legend text overlapping in column chart

[pandia rajan]

My Code:

  var Actdata = google.visualization.arrayToDataTable([
          ['Status','Total','Active Sites', 'Applicable', 'Complied', 'In Process', 'Not Complied'],
          ['A', 232, 150,12,    23,  34,   56],    
          ['W',  232, 150, 57, 10, 41, 21],
          ['I', 232, 150,    12,   10,103,11] 
        ]);

        var Actoptions = {
          is3D: true,
           'width': width,
          'height': height,
          legend : {position: 'right', alignment :'center', textStyle: {color: 'blue', fontSize: 14,bold:true}},
          chartArea : {left:20,top:20,width:"90%",height:"80%"}
        };

        var Actchart = new google.visualization.ColumnChart(document.getElementById('containAct'));
        Actchart.draw(Actdata, Actoptions);

[Sergey Grabkovsky]

Hi, I wasn't able to reproduce your issue of text overlapping, but I did notice that your axis labels and legend labels are being cut off and replaced with '...'. this happens when you don't leave enough room for the labels. I got good results with the following chartArea options: chartArea : {left:40,top:20,width:"80%",height:"80%"}. However, when people generally complain about labels overlapping, that's due to attempting to draw in an invisible container. We currently do not support this, so you need to make sure that your container is not display:none when you draw the chart.

- Sergey

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

[asgallant]

Addendum: the chart cannot be drawn properly if any of its parent elements are hidden, not just the container.

On Tuesday, September 24, 2013 9:32:30 AM UTC-4, Sergey wrote:

Hi, I wasn't able to reproduce your issue of text overlapping, but I did notice that your axis labels and legend labels are being cut off and replaced with '...'. this happens when you don't leave enough room for the labels. I got good results with the following chartArea options: chartArea : {left:40,top:20,width:"80%",height:"80%"}. However, when people generally complain about labels overlapping, that's due to attempting to draw in an invisible container. We currently do not support this, so you need to make sure that your container is not display:none when you draw the chart.

- Sergey

On Tue, Sep 24, 2013 at 12:57 AM, pandia rajan <pandiar...@gmail.com> wrote:

My Code:

  var Actdata = google.visualization.arrayToDataTable([
          ['Status','Total','Active Sites', 'Applicable', 'Complied', 'In Process', 'Not Complied'],
          ['A', 232, 150,12,    23,  34,   56],    
          ['W',  232, 150, 57, 10, 41, 21],
          ['I', 232, 150,    12,   10,103,11] 
        ]);

        var Actoptions = {
          is3D: true,
           'width': width,
          'height': height,
          legend : {position: 'right', alignment :'center', textStyle: {color: 'blue', fontSize: 14,bold:true}},
          chartArea : {left:20,top:20,width:"90%",height:"80%"}
        };

        var Actchart = new google.visualization.ColumnChart(document.getElementById('containAct'));
        Actchart.draw(Actdata, Actoptions);

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

[mahesh kedari]

Is there any workaround for this issue in current version?

- Mahesh

[Sergey Grabkovsky]

Hi Mahesh,

This is a known issue when you attempt to render a chart in an invisible div. If this is what you are doing, please do not do that, and render the chart only when the div becomes visible. If you are not doing this, please post back with a more complete code sample so that we may reproduce the issue you are experiencing.

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/f05a30c3-1c6a-4e7d-93ac-71d019d33c73%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

	•	Sergey Grabkovsky
	•	Software Engineer
	•	Google, Inc
	•	gra...@google.com