Chart legend labels cut off Topic is solved

[Timo]

I am showing a chart of Type Bar Graph. As you can see, the labels are very narrow, being cut off. How do I make it so that the whole label text is visible? I know that a tooltip appears on mouse hover. but as I use charts on a wallboard monitor without user interaction, this feature can't be used.

chart_org.png

I googled a bit and saw that I'm not the only one facing this issue and found that adjusting the chartArea width option gives more space for labels and solved the problem for me.

Modified nuChart function:

Code: Select all

		var options = {
			title 		: h,
			vAxis		: {title: y},
			hAxis		: {title: x},
			seriesType	: st,
			isStacked 	: is,
		        chartArea   : {left:"10%", width:"65%"} <--- added
		};

chart_after.png

I hope you can add this change to nuBuilder in some way. Or even add new options in the settings. Otherwise my changes will be lost on the next update.

[admin]

Timo,

Customising this is up to the developer. - what you have done is give more room to the graph legend, at the expense of the Y-axis label.

Not a bad idea if you don't need the label.

Steven

[toms]

Timo,

That's also something I noticed. I'm not sure what's the best/recommended way to customize these inbuilt charts since you don't have access to the internal chart variable/object.

[Timo]

Meanwhile, is there an option to easily change a chart once it has been created?
E.g. Show legend cetered, change colors, set a chart area size etc.?

[kev1n]

The latest version makes it easy to customise a chart by overwriting it options.

Declare a nuChartOnReady() function in the form's custom code like this example:

Code: Select all

function nuChartOnReady(i, wrapper) {

      var options = {

        stroke: '#8560898c',
        bar: { groupWidth: '80%' },

        chartArea:{left:10,
                    top:70,
                    right: 10,
                    width:'100%'
        },
        
        backgroundColor: 'transparent',
        vAxis: {
            textStyle:{color: '#914692'}
        },
        legend: {'position':'right','alignment':'center'},
        colors: ['#ED5564','#FFCE54','#A0D568','#4FC1E8','#AC92EB']
        
      };
  
	wrapper.setOptions(options);
	wrapper.draw();
}

[Timo]

Kevin, thanks. I'll give that a try.