CODEWITHSUNDEEP
jqueryamcharts
Danyal Sandeelo
Danyal Sandeelo

Reputation: 12391

how to show all the values on x-axis in amcharts

I want to show the exact total that a user has achieved like this:

enter image description here

Here is how I generate the chart. Is there any way to show the exact value, if I can show all the values in x-axis that wil work fine too. 

var chart = AmCharts.makeChart("chartdiv", {
"theme": "light",
"type": "serial",
"dataProvider": [
{
    "year": "WORK--------------------",
    "income":0
},
{
    "year": "Well",
    "income": <?=$final1?>
}, {
    "year":  "Opportunity-oriented",
    "income": <?=$final2?>
}, {
    "year": "Relationship-driven",
    "income": <?=$final3?>
}, {
    "year": "Kind",
    "income": <?=$final4?>
}, 
{
    "year": "",
    "income": 0
}, 
{
    "year": "SMART-------------------",
    "income":0
},

        {
    "year": "Successful",
    "income":<?=$final5?>
},
 {
    "year": "Managerial",
    "income": <?=$final6?>
},
 {
    "year": "Action-oriented",
    "income":<?=$final7?>
},
 {
    "year": "Resilient",
    "income": <?=$final8?>
},
{
    "year": "Tenacious",
    "income": <?=$final9?>
},

    ],

    "valueAxes": [{
    "title": "Work Smart Assessment",
                              "minimum": 0,
"maximum": 5

}],
"graphs": [{
    "balloonText": "Income in [[category]]:[[value]]",
    "fillAlphas": 1,
    "lineAlpha": 0.2,
    "title": "Income",
    "type": "column",
    "valueField": "income",
    "colorField": "color"
}],
"depth3D": 0,
"angle": 30,
"rotate": true,
"categoryField": "year",
"categoryAxis": {
    "gridPosition": "start",
    "fillAlpha": 0.05,
    "position": "left"
},
"export": {
    "enabled": true
 }
});

Upvotes: 0

Views: 3484

Answers (1)

xorspark
xorspark

Reputation: 16012

There are two approaches you can take.

1) You can set labelText to "[[value]]" in your graph to display the total on top of the column, however you can't make it display all the way at the edge like in your screenshot. You might also want to set showAllValueLabels to true in case your value is close to the end of the X-axis so that you can force it to be visible. This is the easiest option as the values are rendered automatically by the chart:

graphs: [{
  // ...
  labelText: "[[value]]"
  showAllValueLabels: true,
  // ...
}]

Demo:

var chart = AmCharts.makeChart("chartdiv", {
  "theme": "light",
  "type": "serial",
  "dataProvider": [{
      "year": "WORK--------------------",
      "income": 0
    },
    {
      "year": "Well",
      "income": 1.0
    }, {
      "year": "Opportunity-oriented",
      "income": 2.0
    }, {
      "year": "Relationship-driven",
      "income": 3.0
    }, {
      "year": "Kind",
      "income": 4.0
    },
    {
      "year": "",
      "income": 0
    },
    {
      "year": "SMART-------------------",
      "income": 0
    },

    {
      "year": "Successful",
      "income": 4.8
    },
    {
      "year": "Managerial",
      "income": 3.8
    },
    {
      "year": "Action-oriented",
      "income": 2.5
    },
    {
      "year": "Resilient",
      "income": 1.3
    },
    {
      "year": "Tenacious",
      "income": 1.8
    },

  ],

  "valueAxes": [{
    "title": "Work Smart Assessment",
    "minimum": 0,
    "maximum": 5

  }],
  "graphs": [{
    "balloonText": "Income in [[category]]:[[value]]",
    "fillAlphas": 1,
    "lineAlpha": 0.2,
    "title": "Income",
    "type": "column",
    "valueField": "income",
    "labelText": "[[value]]",
    "showAllValueLabels": true,
    "colorField": "color"
  }],
  "depth3D": 0,
  "angle": 30,
  "rotate": true,
  "categoryField": "year",
  "categoryAxis": {
    "gridPosition": "start",
    "fillAlpha": 0.05,
    "position": "left"
  },
  "export": {
    "enabled": true
  }
});
html, body {
  width: 100%;
  height: 100%;
}

#chartdiv {
  width: 100%;
  height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="//www.amcharts.com/lib/3/plugins/export/export.css">
<div id="chartdiv"></div>

2) If you really need the labels to show up on the right hand side, you can use guides, but you'll need to generate each label yourself in your code. You'll also need to set a marginRight in your chart to account for the labels.

AmCharts.makeChart("chartdiv", {
  // ...
  "marginRight": 50, //adjust as needed
  "guides": [{
      "category": "Well",
      "label": "1.0",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    }, {
      "category": "Opportunity-oriented",
      "label": "2.0",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    }, 
  // .. etc
  ],
});

Demo:

var chart = AmCharts.makeChart("chartdiv", {
  "theme": "light",
  "type": "serial",
  "marginRight": 50,
  "guides": [{
      "category": "Well",
      "label": "1.0",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    }, {
      "category": "Opportunity-oriented",
      "label": "2.0",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    }, {
      "category": "Relationship-driven",
      "label": "3.0",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    }, {
      "category": "Kind",
      "label": "4.0",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    },
    {
      "category": "Successful",
      "label": "4.8",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    },
    {
      "category": "Managerial",
      "label": "3.8",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    },
    {
      "category": "Action-oriented",
      "label": "2.5",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    },
    {
      "category": "Resilient",
      "label": "1.3",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    },
    {
      "category": "Tenacious",
      "label": "1.8",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    },
  ],
  "dataProvider": [{
      "year": "WORK--------------------",
      "income": 0
    },
    {
      "year": "Well",
      "income": 1.0
    }, {
      "year": "Opportunity-oriented",
      "income": 2.0
    }, {
      "year": "Relationship-driven",
      "income": 3.0
    }, {
      "year": "Kind",
      "income": 4.0
    },
    {
      "year": "",
      "income": 0
    },
    {
      "year": "SMART-------------------",
      "income": 0
    },

    {
      "year": "Successful",
      "income": 4.8
    },
    {
      "year": "Managerial",
      "income": 3.8
    },
    {
      "year": "Action-oriented",
      "income": 2.5
    },
    {
      "year": "Resilient",
      "income": 1.3
    },
    {
      "year": "Tenacious",
      "income": 1.8
    },

  ],

  "valueAxes": [{
    "title": "Work Smart Assessment",
    "minimum": 0,
    "maximum": 5

  }],
  "graphs": [{
    "balloonText": "Income in [[category]]:[[value]]",
    "fillAlphas": 1,
    "lineAlpha": 0.2,
    "title": "Income",
    "type": "column",
    "valueField": "income",
    "colorField": "color"
  }],
  "depth3D": 0,
  "angle": 30,
  "rotate": true,
  "categoryField": "year",
  "categoryAxis": {
    "gridPosition": "start",
    "fillAlpha": 0.05,
    "position": "left"
  },
  "export": {
    "enabled": true
  }
});
#chartdiv {
  width: 100%;
  height: 500px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="//www.amcharts.com/lib/3/plugins/export/export.css">
<div id="chartdiv"></div>

Upvotes: 3

Related Questions