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 <code>negativeBase</code> you want. If you set <code>fillAlphas</code> 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. <h2>Date based category axis</h2> 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. <h2>Position of the axis</h2> You can easily change position of value and category axis. Click EDIT button and add <code>position: "right"</code> 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 <code>inside: false</code>. If you'd like your category axis to be on top, add <code>position: "top"</code> to category axis object, also, as in this particular example we disabled automatic margins, you should increase <code>topMargin</code> value in order axis labels to fit, or simply set <code>autoMargins</code> to true.

by rahulshukla422

HTML

<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>
<div id="chartdiv"></div>

CSS

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

JavaScript

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": "light",
  "type": "serial",
  "dataProvider": chartData,
  "valueAxes": [ {
    "inside": true,
    "axisAlpha": 0,
     "guides": [{
                    "value": 70,
                    "lineAlpha": 0.8,
                    "lineColor": "#0c3984",
                    "label": "Stop",
                }],
  } ],
  "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
  }
} );