fakhryan

Need Show Up "DisplayValue" Outside of Bar "stackedbar2d" Chart

Recommended Posts

Help please,

Display Value going overlap when bar shink because data on inside bar chart.

we need data show up outside of bar chart to avoid overlap (dont want to hide).

we tries some trick like set Display value with extra whitespace

"displayValue": "     -2.000     "

but fusion core replace / render it into only 1 space .

we find attribute some attribute

"valuePosition" : "outside"

but, it's not support when using "stackedbar2d"

 

this is my quick example full code :

<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'stackedbar2d',
    renderAt: 'chart-container',
    width: '450',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Revenue split byw product category",
            "subCaption": "For current year",
            "xAxisname": "Quarter",
            "yAxisName": "Revenues (In USD)",
            //Showing the Cumulative Sum of stacked data
            "numberPrefix": "$",
			"showValues": "1"
        },
        "categories": [{
            "category": [{
                    "label": "Q1"
                },
                {
                    "label": "Q2"
                },
                {
                    "label": "Q3"
                },
                {
                    "label": "Q4"
                }
            ]
        }],
        "dataset": [{
                "seriesname": "Food Products",
                "data": [{
						"label": "Q1",
                        "value": "0",
                        "displayValue": "0"
                    },
                    {
						"label": "Q2",
                        "value": "100",
						"displayValue": "100"
                    },
                    {
						"label": "Q3",
                        "value": "5000",
						"displayValue": "5.000"
                    },
                    {
						"label": "Q4",
                        "value": "3500",
						"displayValue": "3.500"
                    }
                ]
            },
            {
                "seriesname": "Non-Food Products",
                "data": [{
                        "value": "-8",
						"displayValue": "-8"
                    },
                    {
                        "value": "-20",
						"displayValue": "-20"
                    },
                    {
                        "value": "-2000",
						"displayValue": "-2.000"
                    },
                    {
                        "value": "-1000",
						"displayValue": "-1.000"
                    }
                ]
            }
        ]
    }
});
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Hope i got help, thanks :wacko:

expectation.jpg

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