Raj Parekh
Raj Parekh

Reputation: 94

Amcharts not showing balloonText of highest value

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.Amchart Of Bench

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

Answers (2)

xorspark
xorspark

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

RawkTech
RawkTech

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

Related Questions