Line Chart data overlap

[achan]

Hi,

 

I have an issue with Line charts as the data values are overlapping each other. Basically I would like the chart to look better without resizing the actual chart. Is this possible? Also, The first data point, always overlaps with the y axis.

 

here is my DATA:

var divNewLeadsAndBMsXML = "<chart Caption='New Leads And Buyer Matches' ShowValues='1' ShowBorder='0' LegendNumColumns='1' PaletteColors='B63729,035AC8' BGColor='FFFFFF' ValuePosition='ABOVE' CanvasBorderThickness='.5' LegendBorderThickness='.5' PlotBorderThickness='0' BaseFont='Inherit' CaptionFontBold='0' PlotGradientColor=' ' AlternateHGridColor='#ffff' DivLineThickness='.5' ShowLegend='1' AnchorRadius='.1' NumDivLines='5'  ><styles><definition><style name='myCaption' type='font' size='14'/></definition><application><apply toObject='Caption' styles='myCaption' /></application></styles><categories><category Label='May' /><category Label='Jun' /><category Label='Jul' /><category Label='Aug' /><category Label='Sep' /><category Label='Oct' /><category Label='Nov' /><category Label='Dec' /><category Label='Jan' /><category Label='Feb' /><category Label='Mar' /><category Label='Apr' /></categories><Dataset border='0' seriesName='New Buyer Matches' ><set border='0' value='6' /><set border='0' value='3' /><set border='0' value='4' /><set border='0' value='0' /><set border='0' value='1' /><set border='0' value='7' /><set border='0' value='8' /><set border='0' value='6' /><set border='0' value='0' /><set border='0' value='3' /><set border='0' value='1' /><set border='0' value='0' /></Dataset><Dataset border='0' seriesName='New Leads' ><set border='0' value='15' /><set border='0' value='6' /><set border='0' value='7' /><set border='0' value='4' /><set border='0' value='2' /><set border='0' value='24' /><set border='0' value='13' /><set border='0' value='9' /><set border='0' value='2' /><set border='0' value='9' /><set border='0' value='32' /><set border='0' value='1' /></Dataset></chart>";FusionCharts.setCurrentRenderer('javascript');var FusionChartdivNewLeadsAndBMs = new FusionCharts("FusionCharts/MSLine", "FC_divNewLeadsAndBMs", "250", "250"); FusionChartdivNewLeadsAndBMs.setXMLData(divNewLeadsAndBMsXML);var CallToRender_divNewLeadsAndBMs=FusionChartdivNewLeadsAndBMs.render("divNewLeadsAndBMs");

 

 

[Swarnam]

Hey,

 

Try using "valuePosition" attribute at set element level to position a particular data value on the chart.

<set border='0' value='6' valuePosition='Below' /> 

This attribute lets you adjust the vertical alignment of individual data values with respect to dataplots.

 

Hope this helps.

[achan]

no that didn't really help. I tried putting first dataseries as above, then second dataseries as below, but the chart still looks the same.

 

well I mean by better is for the data values not to overlap with the Line chart / x-axis / y-axis / with other data values. Is this feasible?

[Swarnam]

Hey,

 

To avoid the overlap b/w first data point and Y axis, try adding "canvasPadding" attribute. This attribute lets you set the space between the canvas border and first & last data points.

<chart ...canvasPadding='10'>

The data values are not being displayed below the line plot when"valuePosition" is set as "Below", due to less space availability, FuionCharts automatically overrides the value to improve the visualization.

 

However, in our upcoming release, we have "valuePadding" attribute, which will help you out to an extent. Please find the attached screenshot.

 

Hope this helps.