Ploegske Report post Posted August 20, 2014 Been using jsfiddle to solve this problem, but can't seem to point a finger. http://jsfiddle.net/fusioncharts/5BJnH/ Although I set every possible way to force all labels along the y-axis, it doens't work. Only if I set base fontsize from 13 to 12, it works. It seems to me however that labels can be displayed within this space even at fontsize 13. If apply a style to yaxisvalues with fontsize 11, it doesn't work either. What's the issue and how can I force display all y-axis values, without setting fontsizes too small (or other obvious things like height of chart, numdivlines etc)?? jsFiddle code is as follows: FusionCharts.ready(function () { var revenueChart = new FusionCharts({ type: 'stackedcolumn2d', renderAt: 'chart-container', width: '450', height: '250', dataFormat: 'json', dataSource: { "chart": { "caption": "test values" ,"subCaption": "" ,"xAxisname": "" ,"yAxisName": "" ,"formatNumberscale": 0 ,"sformatNumberscale": 0 ,"numberSuffix": "%" ,"showValues": 0 ,"showLegend": 1 ,"thousandSeparator":"." ,"decimalSeparator":"," ,"drawAnchors": 0 ,"bgAlpha":"0,0" ,"showBorder":0 ,"baseFont":"Calibri" ,"baseFontSize":"13" ,"legendShadow":0 ,"showTooltip":1 ,"adjustDiv":0 ,"decimals":1 ,"forceDecimals":1 ,"linethickness":2 ,"labelDisplay":"WRAP" ,"yAxisMaxValue":7 ,"showDivLineValues":1 ,"showYAxisValues":1 ,"showLimits":1 ,"numDivLines":6 ,"yAxisValuesStep":1 }, "categories": [{ "category": [{ "label": "jan" }, { "label": "feb" }, { "label": "mrt" }, { "label": "apr" }, { "label": "mei" }, { "label": "jun" }, { "label": "jul" }, { "label": "aug" }, { "label": "sep" }, { "label": "okt" }, { "label": "nov" }, { "label": "dec" }] }], "dataset": [{ "seriesname": "test1", "data": [{ "value": "4.6", "label": "jan" }, { "value": "5.1", "label": "jan" }, { "value": "4.1", "label": "feb" }, { "value": "4.6", "label": "mrt" }, { "value": "4.2", "label": "apr" }, { "value": "3.7", "label": "mei" }, { "value": "3.1", "label": "jun" }] }, { "seriesname": "test2", "data": [{ "value": "0.7", "label": "jan" }, { "value": "0.7", "label": "jan" }, { "value": "0.8", "label": "feb" }, { "value": "0.9", "label": "mrt" }, { "value": "0.7", "label": "apr" }, { "value": "0.6", "label": "mei" }, { "value": "0.5", "label": "jun" }] }] } }); revenueChart.render(); }); Share this post Link to post Share on other sites
Sanjukta Report post Posted August 21, 2014 Been using jsfiddle to solve this problem, but can't seem to point a finger. http://jsfiddle.net/fusioncharts/5BJnH/ Although I set every possible way to force all labels along the y-axis, it doens't work. Only if I set base fontsize from 13 to 12, it works. It seems to me however that labels can be displayed within this space even at fontsize 13. If apply a style to yaxisvalues with fontsize 11, it doesn't work either. What's the issue and how can I force display all y-axis values, without setting fontsizes too small (or other obvious things like height of chart, numdivlines etc)?? jsFiddle code is as follows: FusionCharts.ready(function () { var revenueChart = new FusionCharts({ type: 'stackedcolumn2d', renderAt: 'chart-container', width: '450', height: '250', dataFormat: 'json', dataSource: { "chart": { "caption": "test values" ,"subCaption": "" ,"xAxisname": "" ,"yAxisName": "" ,"formatNumberscale": 0 ,"sformatNumberscale": 0 ,"numberSuffix": "%" ,"showValues": 0 ,"showLegend": 1 ,"thousandSeparator":"." ,"decimalSeparator":"," ,"drawAnchors": 0 ,"bgAlpha":"0,0" ,"showBorder":0 ,"baseFont":"Calibri" ,"baseFontSize":"13" ,"legendShadow":0 ,"showTooltip":1 ,"adjustDiv":0 ,"decimals":1 ,"forceDecimals":1 ,"linethickness":2 ,"labelDisplay":"WRAP" ,"yAxisMaxValue":7 ,"showDivLineValues":1 ,"showYAxisValues":1 ,"showLimits":1 ,"numDivLines":6 ,"yAxisValuesStep":1 }, "categories": [{ "category": [{ "label": "jan" }, { "label": "feb" }, { "label": "mrt" }, { "label": "apr" }, { "label": "mei" }, { "label": "jun" }, { "label": "jul" }, { "label": "aug" }, { "label": "sep" }, { "label": "okt" }, { "label": "nov" }, { "label": "dec" }] }], "dataset": [{ "seriesname": "test1", "data": [{ "value": "4.6", "label": "jan" }, { "value": "5.1", "label": "jan" }, { "value": "4.1", "label": "feb" }, { "value": "4.6", "label": "mrt" }, { "value": "4.2", "label": "apr" }, { "value": "3.7", "label": "mei" }, { "value": "3.1", "label": "jun" }] }, { "seriesname": "test2", "data": [{ "value": "0.7", "label": "jan" }, { "value": "0.7", "label": "jan" }, { "value": "0.8", "label": "feb" }, { "value": "0.9", "label": "mrt" }, { "value": "0.7", "label": "apr" }, { "value": "0.6", "label": "mei" }, { "value": "0.5", "label": "jun" }] }] } }); revenueChart.render(); }); Hi, Please note that since you have provided a small height to the chart, the chart is skipping the Y-axis values to prevent overlapping. In case you increase the height slightly by another 50px, the chart is rendered as expected. Ref.- http://jsfiddle.net/5BJnH/62/ This is controlled by the chart's intelligence based on some internal calculation with respect to chart dimensions, hence, this cannot be controlled explicitly. Hope this helps. Share this post Link to post Share on other sites
Ploegske Report post Posted August 22, 2014 Hi Sanjukta Thnx for responding. I was expecting something like this. Overlapping could be an issue, but my eye tells me there's enough space. Too bad Regards Albert Share this post Link to post Share on other sites
Sanjukta Report post Posted August 25, 2014 Hi Sanjukta Thnx for responding. I was expecting something like this. Overlapping could be an issue, but my eye tells me there's enough space. Too bad Regards Albert Hi Albert, The chart calculates the space internally which might not be what is expected visually, hence, the skipping of values to prevent the chances of overlapping. Share this post Link to post Share on other sites
