CODEWITHSUNDEEP
htmljsonamcharts
Jega B
Jega B

Reputation: 35

bar chart some x axis values missing in amchart

In Amcharts ,some category fields(X axis values) missing in barchart. I have more than 200 x axis values. Please check the below code.

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv", {
    "theme": "light",
    "type": "serial",
    "startDuration": 2,
    "dataProvider": [
        {
            "country": "Applications & Analytics",
            "visits": 765,
            "color": "#FF6600"
        },
        {
            "country": "Common Software Foundation",
            "visits": 1,
            "color": "#FF6600"
        },
        {
            "country": "Customer Doc",
            "visits": 1,
            "color": "#FF6600"
        },
        ........
        .......
        ........
        {
            "country": "LTE",
            "visits": 2,
            "color": "#FF6600"
        },
        {
            "country": "Radio Standards II",
            "visits": 6,
            "color": "#FF6600"
        },

    ],
    "valueAxes": [{ 
         "position": "left", 
         "title": "Visitors" 
    }], 
    "graphs": [{ 
         "balloonText": "[[category]]: <b>[[value]]</b>", 
         "fillColorsField": "color", 
         "valueAxis.dashLength": 5,
         "fillAlphas": 1, 
         "lineAlpha": 0.1, 
         "type": "column", 
         "valueField": "visits" 
    }], 
    "chartCursor": { 
        "categoryBalloonEnabled": false, 
        "cursorAlpha": 0, 
        "zoomable": false 
    }, 
    "categoryField": "country", 
    "categoryAxis": { 
        "categoryAxis.dashLength":100,
        "categoryAxis.gridPosition": "start",
        "gridPosition": "start",
        "autoGridCount": "true",
        "gridPosition": "start", 
        "autoGridCount": "true",
        "labelRotation": 90
    }, 
    "export": { 
        "enabled": true 
    } 
}); 
</script> 

<!-- HTML --> 
<div id="chartdiv"></div>

Please find image for more clarity. Bar 215 get created, but field value is not displaying for all the bar.

Please suggest me how can i get all the x axis text in bar.

Upvotes: 0

Views: 2867

Answers (1)

Geshode
Geshode

Reputation: 3764

Add "minHorizontalGap": 0 in your "categoryAxis", like this:

"categoryAxis": { 
    "categoryAxis.dashLength":100,
    "categoryAxis.gridPosition": "start",
    "gridPosition": "start",
    "autoGridCount": "true",
    "gridPosition": "start", 
    "autoGridCount": "true",
    "labelRotation": 90,
    "minHorizontalGap": 0
}

The default gap is set to 75, which causes the labels not to be seen by such a large number of labels.

Upvotes: 3

Related Questions