Line with different negative color
As you see, the line graph can use different color for it’s positive and negative part. And even more – line color can change at user defined value – you can set any negativeBase you want. If you set fillAlphas for the graph to a greater than 0 value, this line chart will became area chart, and it will also use different fill colors for positive and negative part of the graph.
Date based category axis
If you zoom-out and zoom0in the chart, you will notice that date format and the number of grid lines changes, depending on the length of selected period. Grid lines are placed ad logical intervals – beginning of the week, month or year. And dates on category axis also use different date format.
Position of the axis
You can easily change position of value and category axis. Click EDIT button and add position: "right" to the value axis object. Run the script ad the axis will be displayed on the right. In case you don’t like axis labels to be displayed inside the plot area, simply set inside: false. If you’d like your category axis to be on top, add position: "top" to category axis object, also, as in this particular example we disabled automatic margins, you should increase topMargin value in order axis labels to fit, or simply set autoMargins to true.
Demo source
<!-- 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" />
<!-- Chart code -->
<script>
var chartData = generatechartData();
function generatechartData() {
var chartData = [];
var firstDate = new Date();
firstDate.setDate( firstDate.getDate() - 150 );
var visits = -40;
var b = 0.6;
for ( var i = 0; i < 150; i++ ) {
// we create date objects here. In your data, you can have date strings
// and then set format of your dates using chart.dataDateFormat property,
// however when possible, use date objects, as this will speed up chart rendering.
var newDate = new Date( firstDate );
newDate.setDate( newDate.getDate() + i );
if(i > 80){
b = 0.4;
}
visits += Math.round((Math.random()<b?1:-1)*Math.random()*10);
chartData.push( {
date: newDate,
visits: visits
} );
}
return chartData;
}
var chart = AmCharts.makeChart( "chartdiv", {
"theme": "none",
"type": "serial",
"dataProvider": chartData,
"valueAxes": [ {
"inside": true,
"axisAlpha": 0
} ],
"graphs": [ {
"id": "g1",
"balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletBorderColor": "#FFFFFF",
"hideBulletsCount": 50,
"lineThickness": 2,
"lineColor": "#fdd400",
"negativeLineColor": "#67b7dc",
"valueField": "visits"
} ],
"chartScrollbar": {
},
"chartCursor": {},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisAlpha": 0,
"minHorizontalGap": 55
}
} );
</script>
<!-- HTML -->
<div id="chartdiv"></div> 