Reputation: 94
I am using 3D Stacked Column Chart from Amcharts plugin. The output is correct but not able to view the highest value on bar graph.
When I try to hover on the highest value the label is not shown. Below if the amcharts script.
var chart = AmCharts.makeChart("chartdiv", {
"theme": "light",
"labelText": "[[title]]: [[value]]",
"type": "serial",
"titles": [{
"text": "Benches Classification by Borough",
"size": 16
}],
"valueAxes": [{
"stackType": "3d",
"unit": "",
"position": "left",
"title": "Bench Counts:",
}],
"startDuration": 1,
"graphs": [
{
"balloonText": "backless : [[value]]",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"title": "backless",
"type": "column",
"valueField": "backless"
},
{
"balloonText": "backed:[[value]]",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"title": "backed",
"type": "column",
"valueField": "backed"
}],
"plotAreaFillAlphas": 0.1,
"depth3D": 73,
"angle": 60,
"categoryField": "Borough",
"categoryAxis": {
"gridPosition": "start"
},
"export": {
"enabled": true
}
});
Upvotes: 0
Views: 1692
Reputation: 16012
The default behavior is to not show a balloon if there's no room for it (3d charts are a bit more needy). You can work around this by setting a minMaxMultiplier
in your value axis to small factor to increase the maximum of the value axis; you'll want to force the minimum
to 0 if your data is always positive to avoid a negative axis.
var chart = AmCharts.makeChart("chartdiv", {
"theme": "light",
"labelText": "[[title]]: [[value]]",
"type": "serial",
"dataProvider": [{
"backed": 113,
"backless": 56,
"Borough": "Manhattan"
},
{
"backed": 190,
"backless": 64,
"Borough": "Bronx"
},
{
"backed": 127,
"backless": 38,
"Borough": "Brooklyn"
},
{
"backed": 135,
"backless": 50,
"Borough": "Queens"
},
{
"backed": 105,
"backless": 31,
"Borough": "Staten Island"
}
//Lower Manhattan is not a separate borough ;)
],
"titles": [{
"text": "Benches Classification by Borough",
"size": 16
}],
"valueAxes": [{
"stackType": "3d",
"unit": "",
"position": "left",
"title": "Bench Counts:",
"minMaxMultiplier": 1.05,
"minimum": 0
}],
"startDuration": 1,
"graphs": [{
"balloonText": "backless : [[value]]",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"title": "backless",
"type": "column",
"valueField": "backless"
},
{
"balloonText": "backed:[[value]]",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"title": "backed",
"type": "column",
"valueField": "backed"
}
],
"plotAreaFillAlphas": 0.1,
"depth3D": 73,
"angle": 60,
"categoryField": "Borough",
"categoryAxis": {
"gridPosition": "start"
},
"export": {
"enabled": true
}
});
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px"></div>
Another alternative is to create your own balloons using an external div and leverage the rollOverGraphItem
and rollOutGraphItem
events to trigger the balloon. There's an example of this in AmCharts' knowledge base.
Upvotes: 1
Reputation: 1
It is likely the label is outside the view. You can right-click to inspect the chart to see if the label is there.
Try adding some margin at the top?
chart.marginTop = 20;
Upvotes: 0