Sign in to follow this  
Ploegske

Force display of y-axis values

Recommended Posts

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

 

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

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

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

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
Sign in to follow this