DannyR

Html5 Fallback Not Respecting Y-Axis Limits

Recommended Posts

This is really frustrating me. I need to have a chart whose Y-Axis is in the range of 0-100. The SWF version works as expected, however the HighCharts version does not. I tried overriding using _overrideJSChartConfiguration, however it respects NOTHING on the yAxis. See below:

 

<script language="JavaScript">				
var jsonData = {
chart: {
	caption: "Title",
	yaxisminvalue: "0",
	yaxismaxvalue:"100"
},
data:[{
	label: "Name",
	value: "30"
}]
};

FusionCharts.setCurrentRenderer("javascript");

var chart = new FusionCharts("../../js/FusionCharts/Column3D.swf", "myChart-chartId", 400, 300);

chart.setJSONData(jsonData);

if (!!chart._overrideJSChartConfiguration) {
chart._overrideJSChartConfiguration({
	chart: {
		borderRadius: 15	//	works
	},
	credits: {
		enabled: true,
		text: "CREDITS works"
	},
	yAxis: {
		max: 100,
		gridLineColor: "#FF0000",
		title: {
			text: "YAXIS does not"
		}
	},
	xAxis: {
		title: {
			text: "XAXIS works"
		}
	}
});
}

chart.render("myChart");
</script>

 

We're coming up on a VERY important release, so I need to get this resolved ASAP!

Share this post


Link to post
Share on other sites

As reported here:

 

http://forum.fusionc...-y-axis-limits/

 

Looking at the source code, your implementation of HighCharts plotOptions object ALWAYS uses 2 Y-Axes, as seen below:

 

plotOptions: {
yAxis: [{
	startOnTick: false,
	endOnTick: false,
	title: {
		style: {},
		text: ''
	},
	labels: {
		style: {},
		formatter: function () {
			return parseStr(v(this.value, a.chart, 1))
		}
	},
	plotBands: [],
	plotLines: []
},
{
	gridLineWidth: 0,
	startOnTick: false,
	endOnTick: false,
	title: {
		style: {},
		text: ''
	},
	labels: {
		style: {},
		enabled: false,
		formatter: function () {
			return parseStr(v(this.value, a.chart, 2))
		}
	},
	opposite: true
}]
}

 

Since your code actually merges in the end-user's overrides (which I like), it was necessary to frame the yAxis property of the object argument to _overrideJSChartConfiguration() like so (note that yAxis property is now an array of objects):

 

if (!!chart._overrideJSChartConfiguration) {
chart._overrideJSChartConfiguration({
	yAxis: [{
		title: {
			text: "YAXIS label override works!"
		}
	}]
});
}

 

Voilà! Hope this can help someone besides me!

Share this post


Link to post
Share on other sites

Hi DannyR,

Thanks for your post.

you are right. our JS fall-back always use two yaxis where for single axis chart second axis is ignored. so to change any configuration in JS chart you have to use axis as you maintained.

But For your issue you can upgrade to our latest release V3.2.1 to support yaxismax and min value for JS chart also

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now