I get miniatire text or 3 dots i google charts x axis

JavaScript
1

Hello,
Here is the code for a column chart

 function drawVisualization_b() {
       		
        var data = new google.visualization.DataTable();
			data.addColumn('string', 'Couple');
			data.addColumn('number', 'profit');
			
			
			for(var i = 0; i <= datum_b.length-1 ; i++){
				datum_b[i].profit=parseFloat(datum_b[i].profit);
				var obj = datum_b[i];
				data.addRow([obj.item, obj.profit]);
			}

		
  
			  
    var options = {
      title :'Profit / Loss of all traded instruments',
      vAxis: {title: 'Balance', gridlines: { count: 10 }},
		     
      hAxis: {title: 'Traded Instruments ', direction: 1,
		  textStyle : {
            fontSize: 5,  color: "#000",  bold: true
        },
        slantedText: true, 
        slantedTextAngle: 90},
	  colors:['navy'],
       animation: {
          duration: 1000,
          easing: 'out',
          startup: true},
		  bar: { groupWidth: '80%' },
	  barVisibilityThreshold :-1,
	  seriesType: 'bars'};

    var chart = new google.visualization.ComboChart(document.getElementById('balance_div'));
    chart.draw(data, options);
  }//END CHART balance

Here is a screenshot of a chart with font size 5

chart
chart1148×786 52.1 KB

And here is a screenshot of 2 column chatrs.
The upper with font size 5.
The lower with font size 14

2_charts
2_charts1180×406 27.7 KB

I looked for a solution. I limit column number to 10 or 5. The problem remained.
horw do I get readable labels without zooming in ?

2

at a guess, its because the chart is trying to take fairly wordy category names and draw them into a not-very-big space at the bottom of the chart.

You’d have to be able to specify the space used for x axis labels, or use smaller labels.