Disabling Diagonal Text For Values On Axis

[David Self]

Using the new javascript renderer, is there any way to prevent the value text on the axes from appearing diagonally? I'd like for it to appear as it does in the flash version (horizontally), but I haven't been able to find a setting to change this.

[DannyR]

David -

 

If you post a code snip, I'll take a look at it and get back to you shortly.

[David Self]

Thanks for the quick reply. This can be seen in the "My First chart using FusionCharts" example. The relevant code is below:

 

FusionCharts.setCurrentRenderer('JavaScript');

var myChart = new FusionCharts("../../Charts/Column2D.swf", "myChartId", "400", "300", "0", "1");

myChart.setXMLUrl("Data.xml");

myChart.render("chartContainer");

 

 

Contents of Data.xml:

 

<chart caption='Weekly Sales Summary' xAxisName='Week' yAxisName='Sales' numberPrefix='$'

exportEnabled='1' >

<set label='Week 1' value='14400' />

<set label='Week 2' value='19600' />

<set label='Week 3' value='24000' />

<set label='Week 4' value='15700' />

</chart>

 

 

 

David -

 

If you post a code snip, I'll take a look at it and get back to you shortly.

[DannyR]

Hi David -

 

It does look to me that the fallback for the labelDisplay, rotateLabels, slantLabels attributes of <chart/> are not working correctly in fallback mode. I'd have to do some more testing to be sure exactly under what conditions its failing (and file a bug), but first I wanted to give you a hand. The good news is that we can hook the HTML5 version of the chart and override. Add this code before the render - it should work for ya:

 

if (!!myChart._overrideJSChartConfiguration) {
myChart._overrideJSChartConfiguration({
	xAxis: {
		labels: {
			align: "center",
			rotation: 0
		}
	}
});
}

 

Let me know how you make out. =]

[David Self]

Thanks! That worked great for labels on the x-axis. My last problem around this is when I use a Bar2D chart which has a category label on the y-axis. I tried the following snippet:

 

   	if (!!chart._overrideJSChartConfiguration) {
       	chart._overrideJSChartConfiguration({
           	xAxis: {
               	labels: {
                   	align: "center",
                   	rotation: 0,
               	},
               	tickmarkPlacement: "on"
           	},
           	yAxis: {
               	labels: {
                   	align: "left",
                   	rotation: 0,
               	},
               	tickmarkPlacement: "on"
           	}
   	});

 

but, the labels overlap the bars, as you can see in the attachment. Is there any way to keep this from overlapping?

 

Hi David -

 

It does look to me that the fallback for the labelDisplay, rotateLabels, slantLabels attributes of <chart/> are not working correctly in fallback mode. I'd have to do some more testing to be sure exactly under what conditions its failing (and file a bug), but first I wanted to give you a hand. The good news is that we can hook the HTML5 version of the chart and override. Add this code before the render - it should work for ya:

 

if (!!myChart._overrideJSChartConfiguration) {
myChart._overrideJSChartConfiguration({
	xAxis: {
		labels: {
			align: "center",
			rotation: 0
		}
	}
});
}

 

Let me know how you make out. =]

[DannyR]

Little known secret (I found out last week because I debugged the source), FusionCharts implementation of HC ALWAYS uses 2 Y axes. So at the very least, your solution would have to as well. Since you're only using one on your bar chart, you can simply encapsulate your object in an array:

 

Instead of:

 

yAxis: {
labels: {
	align: "left",
	rotation: 0,
},
tickmarkPlacement: "on"
}

 

Use:

 

yAxis: [{
labels: {
	align: "left",
	rotation: 0,
},
tickmarkPlacement: "on"
}]

 

Let me know if that gets you closer to your solution, and if not, gimme some code snips and I'll debug it for ya.

[David Self]

Thanks! That helped a lot! I think I've got it looking like I want now.

 

Little known secret (I found out last week because I debugged the source), FusionCharts implementation of HC ALWAYS uses 2 Y axes. So at the very least, your solution would have to as well. Since you're only using one on your bar chart, you can simply encapsulate your object in an array:

 

Instead of:

 

yAxis: {
labels: {
	align: "left",
	rotation: 0,
},
tickmarkPlacement: "on"
}

 

Use:

 

yAxis: [{
labels: {
	align: "left",
	rotation: 0,
},
tickmarkPlacement: "on"
}]

 

Let me know if that gets you closer to your solution, and if not, gimme some code snips and I'll debug it for ya.

[Sanjukta]

Hi,

 

Glad that your issue is resolved.

 

Happy FusionCharting!

[Sanjukta]

Hi Danny,

 

Thanks for sharing the idea.

 

Happy FusionCharting!