amCharts - baloon does not appear on line-graph

Question

I am trying the object-based approach to create amChart-graphs

whatever I do, I can't get the baloon to display in my line-chart. If I switch it to column-chart, the baloon gets displayed.

this is my approach

  AmCharts.ready( function() {
  // init wrapper
  var chart = new AmCharts.AmSerialChart();
  chart.dataProvider = chartData;
  chart.categoryField = "date";

  // config baloon
  var balloon = chart.balloon;    
  balloon.adjustBorderColor = true;
  balloon.color = "#000000";
  balloon.cornerRadius = 5;
  balloon.fillColor = "#FFFFFF";

  var graph = new AmCharts.AmGraph();
  graph.valueField = "value";
  graph.balloonText = "[[category]]: <b>[[value]]</b>";
  graph.type = "column";
  chart.addGraph( graph ); 

  var categoryAxis = chart.categoryAxis;
  categoryAxis.autoGridCount  = false;
  categoryAxis.gridCount = chartData.length;
  categoryAxis.gridPosition = "start";

  var chartScrollbar = new AmCharts.ChartScrollbar();
  chart.addChartScrollbar(chartScrollbar);

  chart.write( "graphMonitor" );

});

can someone tell me what I am doing wrong?

Answer 1

Line graphs require you either add bullets to your graph (graph.bullet = "round"; or whatever shape) or a chart cursor (chart.chartCursor = new AmCharts.ChartCursor();) for balloons to appear. Pick the method that works best for your use case.

var chartData = getData();
// init wrapper
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "date";

// config baloon
var balloon = chart.balloon;
balloon.adjustBorderColor = true;
balloon.color = "#000000";
balloon.cornerRadius = 5;
balloon.fillColor = "#FFFFFF";

var graph = new AmCharts.AmGraph();
graph.valueField = "value";
graph.balloonText = "[[category]]: <b>[[value]]</b>";
graph.type = "line";
graph.bullet = "round";
chart.addGraph(graph);

var categoryAxis = chart.categoryAxis;
categoryAxis.autoGridCount = false;
categoryAxis.parseDates = true;
categoryAxis.gridCount = chartData.length;
categoryAxis.gridPosition = "start";

var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);

//chart.chartCursor = new AmCharts.ChartCursor(); //alternative solution for balloons

chart.write("graphMonitor");

function getData() {
  var data = [];
  var firstDate = new Date();
  var newDate;
  firstDate.setDate(firstDate.getDate() - 10);
  for (var i = 0; i < 10; ++i) {
    newDate = new Date(firstDate);
    newDate.setDate(i);
    data.push({
      "date": newDate, 
      "value": Math.floor(Math.random() * 20 + 10)
    });
  }
  return data;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="graphMonitor" style="width: 100%; height: 300px"></div>