Question

I am creating a graph in HTML. I am using the API amCharts, but the problem is that it shows the text "amchart" within the graph.

How can I remove that text so that it may look OK?

<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Charts</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="amcharts.js" type="text/javascript"></script>
    <script type="text/javascript">
    var chart;
    var chartData = [{
      country: "USA",
      visits: 400,
      color: "#FF0F00"
    }, {
      country: "China",
      visits: 380,
      color: "#FF6600"
    }, {
      country: "Japan",
      visits: 360,
      color: "#FF9E01"
    }, {
      country: "Germany",
      visits: 340,
      color: "#FCD202"
    }, {
      country: "UK",
      visits: 320,
      color: "#F8FF01"
    }, {
      country: "France",
      visits: 300,
      color: "#B0DE09"
    }, {
      country: "India",
      visits: 240,
      color: "#04D215"
    }, {
      country: "Spain",
      visits: 200,
      color: "#0D8ECF"
    }, {
      country: "Netherlands",
      visits: 140,
      color: "#0D52D1"
    }, {
      country: "Russia",
      visits: 100,
      color: "#2A0CD0"
    }, {
      country: "South Korea",
      visits: 80,
      color: "#8A0CCF"
    }, {
      country: "Canada",
      visits: 20,
      color: "#CD0D74"
    }];
    AmCharts.ready(function () {
      chart = new AmCharts.AmSerialChart();
      chart.dataProvider = chartData;
      chart.categoryField = "country";
      chart.startDuration = 1;
      // AXES
      // category
      var categoryAxis = chart.categoryAxis;
      categoryAxis.labelRotation = 45; // this line makes category values to be rotated
      categoryAxis.gridAlpha = 0;
      categoryAxis.fillAlpha = 1;
      categoryAxis.fillColor = "#FAFAFA";
      categoryAxis.gridPosition = "start";
      // value
      var valueAxis = new AmCharts.ValueAxis();
      valueAxis.dashLength = 5;
      valueAxis.title = "Visitors from country"
      valueAxis.axisAlpha = 0;
      chart.addValueAxis(valueAxis);
      // GRAPH
      var graph = new AmCharts.AmGraph();
      graph.valueField = "visits";
      graph.colorField = "color";
      graph.balloonText = "[[category]]: [[value]]";
      graph.type = "column";
      graph.lineAlpha = 0;
      graph.fillAlphas = 1;
      chart.addGraph(graph);
      // WRITE
      chart.write("chartdiv");
    });
    </script>
  </head>

  <body>
    <div id="chartdiv" style="width: 600px; height: 500px;"></div>
  </body>

</html>
Was it helpful?

Solution

From the product website :

You can download and use all amCharts products for free. The only limitation of the free version is that a small link to this web site will be displayed in the top left corner of your charts. If you would like to use charts without this link, or you appreciate the software and would like to support its creators, please purchase a commercial license.

So you need to purchase a commercial license ...

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top