nuBuilder Forum

Posted: **Tue Apr 03, 2018 10:46 pm**

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.

Posted: **Wed Apr 04, 2018 12:35 am**

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

Posted: **Thu Apr 05, 2018 7:45 pm**

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.

Posted: **Thu Jan 06, 2022 11:00 am**

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.?

Posted: **Thu Jan 06, 2022 5:02 pm**

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();
}

Posted: **Fri Jan 07, 2022 12:19 pm**

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

nuBuilder Forum

Chart legend labels cut off

Chart legend labels cut off

Re: Chart legend labels cut off

Re: Chart legend labels cut off

Re: Chart legend labels cut off

Re: Chart legend labels cut off

Re: Chart legend labels cut off