Amcharts XY charts not displaying balloon

Question

My Charts is not displaying the balloon and I do not understand why. I have a ballon displaying on the y cursor, I can change it to display the value of x axis, but i cannot display a balloon that would display the x axis value in a balloon either on the x cursor or following the value line.

http://jsfiddle.net/47qdtboa/

AmCharts.makeChart("chartdiv",
            {
"type": "xy",
"pathToImages": "http://cdn.amcharts.com/lib/3/images/",
"startDuration": 1.5,
"handDrawn": true,
"theme": "light",
"thousandsSeparator": "'",
"chartCursor": {
            "categoryBalloonEnabled": true,
            "valueLineAxis": "ValueAxis-1",
    "valueLineBalloonEnabled": true,
    "valueLineEnabled": true,
        "balloonText": "[[Distance (m)]]",
                    "showBalloon": true,
    "zoomable": false
    },
//"trendLines": [],
    "color":"#777777",
    "fontFamily":"Londrina Outline",
    "fontSize":23, 
    "categoryField": "Distance (km)",
"graphs": [
    {

        "id": "AmGraph-4",
        "balloonText": "[[Distance (m)]]",
        "title": "graph 4",
        "valueAxis": "Not set",
                    "lineColor": "#59C45C",
        "lineThickness": 3,
                    "fillAlphas": 0.13,
        "fillColors": "#59C45C",
        "fillToAxis": "ValueAxis-2",
        "valueField": "Distance (km)",
        "xAxis": "Distance (km)",
        "xField": "Distance (km)",
        "yField": "Elevation (m)"
    }
],
"valueAxes": [
    {
        "id": "ValueAxis-1",
        "axisAlpha": 0,
        "unit": "m"

    },
    {
        "id": "ValueAxis-2",
        "position": "bottom",
        "axisAlpha": 0,
        "unit": "km",
        "showLastLabel": false
    }
],
"allLabels": [],
"amExport": {},
"balloon": {},
"titles": [],
"dataProvider": [
    {
        "Distance (m)": "0",
        "Distance (km)": "0",
        "Elevation (m)": "749"
    },
    {
        "Distance (m)": "101.543639516933",
        "Distance (km)": "0.11",
        "Elevation (m)": "749"
    },

    { and many more like that ...},

Simon Simon · Accepted Answer · 2014-11-25T11:31:17

I have updated your fiddle here...

http://jsfiddle.net/47qdtboa/1/

What you need to do is basically refer to the x or y axis rather than a field name. You also need to add bullet points to the chart to make the balloons appear.

"graphs": [
    {

        "id": "AmGraph-4",
        "balloonText": "[[x]] (km)",  /*CHANGED THIS LINE*/
        "bullet": "round",            /*ADDED THIS LINE*/
        "bulletSize": 1,              /*ADDED THIS LINE*/
        "title": "graph 4",
        "valueAxis": "Not set",
        "lineColor": "#59C45C",
        "lineThickness": 3,
        "fillAlphas": 0.13,
        "fillColors": "#59C45C",
        "fillToAxis": "ValueAxis-2",
        "xAxis": "Distance (km)",
        "xField": "Distance (km)",
        "yField": "Elevation (m)"
    }
],

Not sure if you can refer to the actual field name but under quick testing I couldn't at least.

Amcharts XY charts not displaying balloon

1 Answers