Barney Stinson Barney Stinson - 4 months ago 38
Javascript Question

Unable to add all labels using amcharts

As per image I am getting only label on first and third column how can I get labels in all columns? Below I have attached an image.

JavaScript code:

<script type="text/javascript">

var chart;

var chartData = [ {
"month": "JAN",
"scores": 200,
"color": "#CD0D74"
}, {
"month": "FEB",
"scores": 700,
"color": "#FF6600"
}, {
"month": "MAR",
"scores": 800,
"color": "#FCD202"
}, {
"month": "APR",
"scores": 990,
"color": "#04D215"
} ];


var chart = AmCharts.makeChart( "chartdiv1", {
"theme": "light",
type: "serial",
dataProvider: chartData,
categoryField: "month",
"startDuration": 1,
categoryAxis: {
labelRotation: 90,
gridPosition: "start"
},


graphs: [ {

valueField: "scores",
colorField: "color",
type: "column",
lineAlpha: 0.1,
fillAlphas: 1
} ],

chartCursor: {
cursorAlpha: 0,
zoomable: false,
categoryBalloonEnabled: false
},
export: {
enabled: true
}
} );
</script>


Here is HTML Code:

<div id="chartdiv1"></div>


Graph Image

Here is **Graph image:**

Please help me out to solve this . Thanks in advance.

Answer

Tested your code in JSFiddle and it is showing all the labels but it is having different chartdata with the example in your image.

https://jsfiddle.net/hfqcvauv/

CSS added for the graph to show

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

Based on the example in image, probably because the month is not inserted for second and fourth chartdata?

Comments