Use below code to generate custom label for valueaxis :
Here we uses line chart
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>amCharts examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script type="text/javascript">
var lineChartData = [
{
"monthDesc": "NOV 2012",
"terms": 30.68
},
{
"monthDesc": "DEC 2012",
"terms": 29.35,
"segment": "Premier Corporation"
},
{
"monthDesc": "JAN 2013",
"terms": 25.46,
"segment": "Premier Corporation"
},
{
"monthDesc": "FEB 2013",
"terms": 28.27,
"segment": "Premier Corporation"
},
{
"monthDesc": "MAR 2013",
"terms": 33.93,
"segment": "Premier Corporation"
},
{
"monthDesc": "APR 2013",
"terms": 13.95,
"segment": "Premier Corporation"
}
]
AmCharts.ready(function () {
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = lineChartData;
chart.pathToImages = "../amcharts/images/";
chart.categoryField = "monthDesc";
chart.addTitle("Top Telent Turnover", 10, "grey", "alpha", "bold")
// sometimes we need to set margins manually
// autoMargins should be set to false in order chart to use custom margin values
//chart.autoMargins = false;
chart.marginRight = 0;
chart.marginLeft = 0;
chart.marginBottom = 0;
chart.marginTop = 0;
// AXES
// category
var categoryAxis = chart.categoryAxis;
// categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
// categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
//categoryAxis.inside = true;
categoryAxis.gridAlpha = 0;
categoryAxis.tickLength = 0;
//categoryAxis.axisAlpha = 0;
categoryAxis.labelRotation = 45;
//categoryAxis.startOnAxis = true;
// value
var valueAxis = new AmCharts.ValueAxis();
//valueAxis.axisAlpha = 0;
//valueAxis.inside = true;
valueAxis.minimum = 0;
valueAxis.maximum = 100;
valueAxis.autoGridCount = false;
valueAxis.gridCount = 10;
valueAxis.tickLength = 0;
valueAxis.dashLength = 2;
function formatLabel(value, valueString, axis){
// let's say we dont' want minus sign next to negative numbers
if(value < 0) {
valueString = valueString.substr(1);
}
// and we also want a letter % to be added next to all labels (you can do it with unit, but anyway)
valueString = valueString + "%";
return valueString;
}
valueAxis.labelFunction = formatLabel;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.title = "Premier Corporation";
graph.type = "line";
graph.valueField = "terms";
graph.lineColor = "blue";
//graph.bullet = "bubble";
graph.customBullet = "images/bullet-point.png"; // bullet for all data points
graph.bulletSize = 7; // bullet image should be a rectangle (width = height)
// graph.customBulletField = "customBullet"; // this will make the graph to display custom bullet (red star)
chart.addGraph(graph);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.position = "bottom";
legend.markerType = "bubble";
legend.markerSize = 7;
//legend.borderAlpha = 0.3;
legend.horizontalGap = 10;
//legend.switchType = "v";
chart.addLegend(legend);
// CURSOR
//var chartCursor = new AmCharts.ChartCursor();
//chart.addChartCursor(chartCursor);
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width:30%; height:400px;border:1px solid grey;border-radius:10px;padding:15px;"></div>
</body>
</html>
Here we uses line chart
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>amCharts examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../amcharts/amcharts.js" type="text/javascript"></script>
<script type="text/javascript">
var lineChartData = [
{
"monthDesc": "NOV 2012",
"terms": 30.68
},
{
"monthDesc": "DEC 2012",
"terms": 29.35,
"segment": "Premier Corporation"
},
{
"monthDesc": "JAN 2013",
"terms": 25.46,
"segment": "Premier Corporation"
},
{
"monthDesc": "FEB 2013",
"terms": 28.27,
"segment": "Premier Corporation"
},
{
"monthDesc": "MAR 2013",
"terms": 33.93,
"segment": "Premier Corporation"
},
{
"monthDesc": "APR 2013",
"terms": 13.95,
"segment": "Premier Corporation"
}
]
AmCharts.ready(function () {
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = lineChartData;
chart.pathToImages = "../amcharts/images/";
chart.categoryField = "monthDesc";
chart.addTitle("Top Telent Turnover", 10, "grey", "alpha", "bold")
// sometimes we need to set margins manually
// autoMargins should be set to false in order chart to use custom margin values
//chart.autoMargins = false;
chart.marginRight = 0;
chart.marginLeft = 0;
chart.marginBottom = 0;
chart.marginTop = 0;
// AXES
// category
var categoryAxis = chart.categoryAxis;
// categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
// categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
//categoryAxis.inside = true;
categoryAxis.gridAlpha = 0;
categoryAxis.tickLength = 0;
//categoryAxis.axisAlpha = 0;
categoryAxis.labelRotation = 45;
//categoryAxis.startOnAxis = true;
// value
var valueAxis = new AmCharts.ValueAxis();
//valueAxis.axisAlpha = 0;
//valueAxis.inside = true;
valueAxis.minimum = 0;
valueAxis.maximum = 100;
valueAxis.autoGridCount = false;
valueAxis.gridCount = 10;
valueAxis.tickLength = 0;
valueAxis.dashLength = 2;
function formatLabel(value, valueString, axis){
// let's say we dont' want minus sign next to negative numbers
if(value < 0) {
valueString = valueString.substr(1);
}
// and we also want a letter % to be added next to all labels (you can do it with unit, but anyway)
valueString = valueString + "%";
return valueString;
}
valueAxis.labelFunction = formatLabel;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.title = "Premier Corporation";
graph.type = "line";
graph.valueField = "terms";
graph.lineColor = "blue";
//graph.bullet = "bubble";
graph.customBullet = "images/bullet-point.png"; // bullet for all data points
graph.bulletSize = 7; // bullet image should be a rectangle (width = height)
// graph.customBulletField = "customBullet"; // this will make the graph to display custom bullet (red star)
chart.addGraph(graph);
// LEGEND
var legend = new AmCharts.AmLegend();
legend.position = "bottom";
legend.markerType = "bubble";
legend.markerSize = 7;
//legend.borderAlpha = 0.3;
legend.horizontalGap = 10;
//legend.switchType = "v";
chart.addLegend(legend);
// CURSOR
//var chartCursor = new AmCharts.ChartCursor();
//chart.addChartCursor(chartCursor);
// WRITE
chart.write("chartdiv");
});
</script>
</head>
<body>
<div id="chartdiv" style="width:30%; height:400px;border:1px solid grey;border-radius:10px;padding:15px;"></div>
</body>
</html>
Posts
