Amcharts - Horizontal Bar Chart For Mobile

I am trying to make Amcharts bar chart for mobile and tablet screen width (less than 766px) I am facing some problems as follows - Since I am using the free version amcharts , ha

Solution 1:

You can change the credits' location by setting creditsPosition in your chart config. top-left is the default, but you can also use top-right, bottom-left and bottom-right.

The only way to set the category label on top of the bar is to use an invisible graph that has the labelText set to "[[category]]" and labelPosition set to inside for the rotated bar chart. For example:

"graphs":[{// invisible graph for the label"labelText":"[[category]]","labelPosition":"inside","showBalloon":false,"fillAlphas":0,"lineAlpha":0,"visibleInLegend":false,"showAllValueLabels":true,"type":"column","valueField":"visits"},//regular graph follows]

There isn't much of a way to change the space in between the columns outside of adding dummy data, which will make your columns smaller as a result. Since you're leveraging an empty column, you can just set the global columnWidth to 1 and tweak the invisible graph's columnWidth to make it smaller and shift the two closer together by setting columnSpacing to 0 to shift things around a little better and make it a little more spaced out/larger.

Demo below:

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "marginRight": 70,
  "rotate": true,
  "columnSpacing": 0,
  "columnWidth": 1,
  "creditsPosition": "bottom-right",
  "dataProvider": [{
    "country": "USA",
    "visits": 3025,
    "color": "#FF0F00"
  }, {
    "country": "China",
    "visits": 1882,
    "color": "#FF6600"
  }, {
    "country": "Japan",
    "visits": 1809,
    "color": "#FF9E01"
  }, {
    "country": "Germany",
    "visits": 1322,
    "color": "#FCD202"
  }, {
    "country": "UK",
    "visits": 1122,
    "color": "#F8FF01"
  }, {
    "country": "France",
    "visits": 1114,
    "color": "#B0DE09"
  }, {
    "country": "India",
    "visits": 984,
    "color": "#04D215"
  }, {
    "country": "Spain",
    "visits": 711,
    "color": "#0D8ECF"
  }, {
    "country": "Netherlands",
    "visits": 665,
    "color": "#0D52D1"
  }, {
    "country": "Russia",
    "visits": 580,
    "color": "#2A0CD0"
  }, {
    "country": "South Korea",
    "visits": 443,
    "color": "#8A0CCF"
  }, {
    "country": "Canada",
    "visits": 441,
    "color": "#CD0D74"
  }],
  "valueAxes": [{
    "axisAlpha": 0,
    "position": "left",
    "title": "Visitors from country"
  }],
  "startDuration": 1,
  "graphs": [{
    "labelText": "[[category]]",
    "labelPosition": "inside",
    "showBalloon": false,    
    "fillAlphas": 0,
    "lineAlpha": 0,
    "columnWidth": .6,
    "visibleInLegend": false,
   "showAllValueLabels": true, 
    "type": "column",
    "valueField": "visits"
  },{
    "balloonText": "<b>[[category]]: [[value]]</b>",
    "fillColorsField": "color",
    "fillAlphas": 0.9,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
   
    "labelsEnabled": false,
    "tickLength": 0,
    "color": "#1e1e1e",
    "labelRotation": 45
  },
  "export": {
    "enabled": true
  }

});

#chartdiv {
  width: 100%;
  height: 500px;
}

.amcharts-export-menu-top-right {
  top: 10px;
  right: 0;
}

<linkhref="https://www.amcharts.com/lib/3/plugins/export/export.css" /><scriptsrc="https://www.amcharts.com/lib/3/amcharts.js"></script><scriptsrc="https://www.amcharts.com/lib/3/serial.js"></script><scriptsrc="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script><scriptsrc="https://www.amcharts.com/lib/3/themes/light.js"></script><linkhref="https://www.amcharts.com/lib/3/plugins/export/export.css"type="text/css"media="all" /><divid="chartdiv"></div>