title: Amcharts - Error while trying to create top and bottom value axes in lower screen widths
body: <p>I am trying to make Amcharts column chart which will rotate and become a horizontal bar chart at lesser screen width. I want two value axes - top and bottom in the mobile screens (lesser than 600px). </p>
  
  <p>I am trying to add this code to the Amcharts javascript API in the responsive part but it is not working and giving error -</p>
  
  <pre><code>,
          "valueAxes": [{
      "position": "top"
    },{
      "position": "bottom
    }
    ],
  </code></pre>
  
  <p>This is my snippet - </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "addClassNames": true,
    "marginRight": 70,
    "panEventsEnabled": false,
    "titles": [{
      "text": "Click on Country to see Visitor details"
    }],
    "dataProvider": [{
      "country": "USA",
      "visits": 3025,
      "hiddenvalue": 3025, // to ensure that the smaller bars' labels are fully clickable
      "color": "#FF0F00",
      "url": "https://codepen.io/"
    }, {
      "country": "China",
      "visits": 1882,
      "hiddenvalue": 3025,
      "color": "#FF6600",
      "url": "https://codepen.io/"
    }, {
      "country": "Japan",
      "visits": 1809,
      "hiddenvalue": 3025,
      "color": "#FF9E01",
      "url": "https://codepen.io/"
    }, {
      "country": "Germany",
      "visits": 1322,
      "hiddenvalue": 3025,
      "color": "#FCD202",
      "url": "https://codepen.io/"
    }, {
      "country": "UK",
      "visits": 1122,
      "hiddenvalue": 3025,
      "color": "#F8FF01",
      "url": "https://codepen.io/"
    }, {
      "country": "France",
      "visits": 1114,
      "hiddenvalue": 3025,
      "color": "#B0DE09",
      "url": "https://codepen.io/"
    }, {
      "country": "India",
      "visits": 984,
      "hiddenvalue": 3025,
      "color": "#04D215",
      "url": "https://codepen.io/"
    }, {
      "country": "Spain",
      "visits": 711,
      "hiddenvalue": 3025,
      "color": "#0D8ECF",
      "url": "https://codepen.io/"
    }, {
      "country": "Netherlands",
      "visits": 665,
      "hiddenvalue": 3025,
      "color": "#0D52D1",
      "url": "https://codepen.io/"
    }, {
      "country": "Russia",
      "visits": 580,
      "hiddenvalue": 3025,
      "color": "#2A0CD0",
      "url": "https://codepen.io/"
    }, {
      "country": "South Korea",
      "visits": 443,
      "hiddenvalue": 3025,
      "color": "#8A0CCF",
      "url": "https://codepen.io/"
    }, {
      "country": "Canada",
      "visits": 441,
      "hiddenvalue": 3025,
      "color": "#CD0D74",
      "url": "https://codepen.io/"
    }],
    "responsive": {
      "enabled": true,
      "rules": [{
        "maxWidth": 600,
        "overrides": {
          "rotate": true,
          "creditsPosition": "bottom-right",
          "columnSpacing": 5,
          "minMarginLeft": 38,
          "depth3D": 0,
          "angle": 0,
          "graphs": [{
            "hidden": false
          }, {
            "columnWidth": 1
          }],
          "legend": {
            "enabled": true,
            "useGraphSettings": true,
            "labelText": "Country",
            "fontSize": 14
          },
          "valueAxes": [{
      "position": "top"
    }
    ],
          "categoryAxis": {
            "labelsEnabled": false,
            "tickLength": 0
          }
        }
      }]
    },
    "valueAxes": [{
      "axisAlpha": 0,
      "position": "left",
      "title": "No. of Visitors"
    }],
    "startDuration": 1,
    "graphs": [{
      "labelText": "[[category]]",
      "labelPosition": "inside",
      "id": "label-only",
      "showBalloon": false,
      "fillAlphas": 0,
      "lineAlpha": 0,
      "hidden": true, //hide by default for larger screen sizes
      "columnWidth": .6,
      "visibleInLegend": false,
      "showAllValueLabels": true,
      "type": "column",
      "urlField": "url",
      "urlTarget": "_blank",
      "valueField": "hiddenvalue", //use hidden value to make labels clickable
      "includeInMinMax": false //make sure the graph doesn't affect the value axis min/max when zooming.
    }, {
      "balloonText": "[[category]]: &lt;b&gt;[[value]]&lt;/b&gt;",
      "fillColorsField": "color",
      "fillAlphas": 0.9,
      "lineAlpha": 0.2,
      "type": "column",
      "urlField": "url",
      "urlTarget": "_blank",
      "valueField": "visits"
    }],
    "depth3D": 10,
    "angle": 45,
    "chartCursor": {
      "categoryBalloonEnabled": false,
      "cursorAlpha": 0,
      "zoomable": false
    },
    "categoryField": "country",
    "categoryAxis": {
      "gridPosition": "start",
      "classNameField": "Ctglabel",
      "labelRotation": 45,
      "minHorizontalGap": 50,
      "title": "Country",
      "urlTarget": "_blank",
      "listeners": [{
        "event": "clickItem",
        "method": function(event) {
          window.open(event.serialDataItem.dataContext.url, '_blank');
        }
      }]
    },
    "export": {
      "enabled": true
    }
  });
  
  document.getElementById('resize').addEventListener('click', function(e) {
    if (e.currentTarget.dataset.resized === "no") {
      document.getElementById("chartdiv").style.width = "500px";
      e.currentTarget.dataset.resized = "yes";
    } else {
      document.getElementById("chartdiv").style.width = "100%";
      e.currentTarget.dataset.resized = "no";
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#chartdiv {
    width: 100%;
    height: 500px;
  }
  
  g.amcharts-category-axis tspan {
    cursor: pointer;
  }
  
  g.amcharts-category-axis text.amcharts-axis-label tspan:hover, 
  g.amcharts-graph-label-only text tspan {
    text-decoration: underline;
    fill: red;
  }
  
  text.amcharts-axis-title {
    font-size: 13px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://www.amcharts.com/lib/3/amcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://www.amcharts.com/lib/3/serial.js"&gt;&lt;/script&gt;
  &lt;script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://www.amcharts.com/lib/3/themes/light.js"&gt;&lt;/script&gt;
  &lt;script src="//www.amcharts.com/lib/3/plugins/responsive/responsive.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /&gt;
  &lt;button id="resize" data-resized="no"&gt;Resize chart&lt;/button&gt;
  &lt;div id="chartdiv"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>