DragLine chart : Labels overlapping issue

[DamienK]

Hello,

We have recently migrated from FusionChart 3.3.1 to FusionChart 3.7.0, and now we can see a little overlapping issue for the drag line charts when 2 curves are displaying the same values.
Am I missing something in the code, or is it bug ? If it is a bug, could you fix it in a next release ?

I have attached a screenshot and the code used to this post.

Thanks in advance !

 

chart = new FusionCharts(
		"DragLine",
		"chartJSId",
		"100%",
		"550",
		"0",
		"1");
chart.setTransparent(true);
chart.setJSONData({
	"chart" : {
		"showborder" : 0,
		"legendshadow" : 1,
		"outcnvbasefont" : "Verdana",
		"canvasborderthickness" : 1,
		"palette" : 1,
		"showexportdatamenuitem" : 1,
		"bgalpha" : 0,
		"basefontcolor" : "000000",
		"borderthickness" : 1,
		"legendborderthickness" : 1,
		"basefont" : "Verdana",
		"outcnvbasefontsize" : 10,
		"outcnvbasefontcolor" : "000000",
		"bgratio" : "100,100",
		"basefontsize" : 10,
		"xaxisname" : "Dates",
		"allowAxisChange" : 0,
		"yaxisname" : "Rate",
		"labeldisplay" : "ROTATE",
		"anchorradius" : 0,
		"yaxismaxvalue" : 100,
		"showrestorebtn" : 0,
		"donotsnap" : 1,
		"numdivlines" : 20,
		"restorebtnwidth" : 85,
		"yaxisminvalue" : -10,
		"showshadow" : 0,
		"showformbtn" : 0,
		"decimals" : 0,
		"showvalues" : 1,
		"canvaspadding" : 20
	},
	"categories" : [{
			"category" : [{
					"name" : "2015-07-01"
				}, {
					"name" : "2015-07-02"
				}, {
					"name" : "2015-07-03"
				}, {
					"name" : "2015-07-04"
				}, {
					"name" : "2015-07-05"
				}, {
					"name" : "2015-07-06"
				}, {
					"name" : "2015-07-07"
				}, {
					"name" : "2015-07-08"
				}
			]
		}
	],
	"dataset" : [{
			"allowdrag" : 0,
			"id" : "TR",
			"dashed" : 0,
			"color" : "0049DF",
			"seriesName" : "Curve 1",
			"showplotborder" : 0,
			"allownegativedrag" : 0,
			"showvalues" : 1,
			"data" : [{
					"value" : 13,
					"anchorborderthickness" : 0,
					"id" : "35527919",
					"anchorsides" : 0,
					"alpha" : 100,
					"anchorradius" : 0
				}, {
					"value" : 13,
					"anchorborderthickness" : 0,
					"id" : "35579915",
					"anchorsides" : 0,
					"alpha" : 100,
					"anchorradius" : 0
				}, {
					"value" : 17,
					"anchorborderthickness" : 0,
					"id" : "35628722",
					"anchorsides" : 0,
					"alpha" : 100,
					"anchorradius" : 0
				}, {
					"value" : 22,
					"anchorborderthickness" : 0,
					"id" : "35662639",
					"anchorsides" : 0,
					"alpha" : 100,
					"anchorradius" : 0
				}, {
					"value" : 24,
					"anchorborderthickness" : 0,
					"id" : "35729448",
					"anchorsides" : 0,
					"alpha" : 100,
					"anchorradius" : 0
				}, {
					"value" : 26,
					"anchorborderthickness" : 0,
					"id" : "35777941",
					"anchorsides" : 0,
					"alpha" : 100,
					"anchorradius" : 0
				}, {
					"value" : 26,
					"anchorborderthickness" : 0,
					"id" : "35830605",
					"anchorsides" : 0,
					"alpha" : 100,
					"anchorradius" : 0
				}, {
					"value" : 26,
					"anchorborderthickness" : 0,
					"id" : "35867943",
					"anchorsides" : 0,
					"alpha" : 100,
					"anchorradius" : 0
				}
			]
		}, {
			"allowdrag" : 1,
			"id" : "TM",
			"dashed" : 1,
			"color" : "05DF00",
			"seriesName" : "Curve 2",
			"showplotborder" : 0,
			"allownegativedrag" : 1,
			"showvalues" : 1,
			"data" : [{
					"value" : 13,
					"anchorborderthickness" : 2,
					"id" : "35527919",
					"anchorbgcolor" : "FFFFFF",
					"anchorsides" : 4,
					"alpha" : 100,
					"anchorradius" : 5,
					"anchorbordercolor" : "05DF00"
				}, {
					"value" : 13,
					"anchorborderthickness" : 2,
					"id" : "35579915",
					"anchorbgcolor" : "FFFFFF",
					"anchorsides" : 4,
					"alpha" : 100,
					"anchorradius" : 5,
					"anchorbordercolor" : "05DF00"
				}, {
					"value" : 17,
					"anchorborderthickness" : 2,
					"id" : "35628722",
					"anchorbgcolor" : "FFFFFF",
					"anchorsides" : 4,
					"alpha" : 100,
					"anchorradius" : 5,
					"anchorbordercolor" : "05DF00"
				}, {
					"value" : 22,
					"anchorborderthickness" : 2,
					"id" : "35662639",
					"anchorbgcolor" : "05DF00",
					"anchorsides" : 4,
					"alpha" : 100,
					"anchorradius" : 5,
					"anchorbordercolor" : "05DF00"
				}, {
					"value" : 24,
					"anchorborderthickness" : 2,
					"id" : "35729448",
					"anchorbgcolor" : "05DF00",
					"anchorsides" : 4,
					"alpha" : 100,
					"anchorradius" : 5,
					"anchorbordercolor" : "05DF00"
				}, {
					"value" : 26,
					"anchorborderthickness" : 2,
					"id" : "35777941",
					"anchorbgcolor" : "FFFFFF",
					"anchorsides" : 4,
					"alpha" : 100,
					"anchorradius" : 5,
					"anchorbordercolor" : "05DF00"
				}, {
					"value" : 26,
					"anchorborderthickness" : 2,
					"id" : "35830605",
					"anchorbgcolor" : "FFFFFF",
					"anchorsides" : 4,
					"alpha" : 100,
					"anchorradius" : 5,
					"anchorbordercolor" : "05DF00"
				}, {
					"value" : 26,
					"anchorborderthickness" : 2,
					"id" : "35867943",
					"anchorbgcolor" : "FFFFFF",
					"anchorsides" : 4,
					"alpha" : 100,
					"anchorradius" : 5,
					"anchorbordercolor" : "05DF00"
				}
			]
		}
	]
});
chart.render("chartId");

 

 

[Vishalika]

Hi,

 

To avoid the overlapping issue, you can try setting the attribute "valuePosition" in the dataset element of your specific data.

 

By default, this attribute is set to AUTO mode in which the alignment of a data value is determined automatically based on the position of its plot point. In ABOVE mode, a data value is displayed above the plot point unless a plot point is too close to the upper edge of the canvas while in BELOW mode, a data value is displayed below the plot point unless a plot point is too close to the lower edge of the canvas.

 

Refer this link: http://jsfiddle.net/vishalika/8Fq44/1/

 

Hope this helps.

[DamienK]

Hi,

 

Sorry I did not see that you had answered to this topic.

So I will just say that it is a fine solution when the points are indeed between 10% and 90%. But when the points are too closed to one edge, the overlapping issue appears again.

 

It is not a big deal for now, as the property "valuePosition" can be helpful in most cases for our users. Nevertheless, could this little bug be fixed in a future release?

 

Thank you for your answer by the way

[Vishalika]

Hi,

 

Glad to know that it helped you.

 

It can be taken as improvement. We cannot commit any timeline for this.