AmCharts Trending Chart

v3 vs. v4

by notacouch

HTML

<!-- amcharts 3 -->
<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/themes/light.js"></script>

<!-- amcharts 4 -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">

<div class="tile" id="v3chart"></div>
<div class="tile" id="v4chart"></div>

CSS

body {
  font-family: 'Open Sans', sans-serif;
  background: #D9E3F0;
}

.tile {
  height: 400px;
  margin: 0 0 10px 0;
  background: #FFF;
}

JavaScript

// AmCharts v3
var v3BarChart = AmCharts.makeChart("v3chart", {
    "type": "serial",
    "plotAreaBorderColor": "#333333",
    "color": "#333333",
    "creditsPosition": "bottom-right",
    "addClassNames": true,
    "fontFamily": "Open Sans",
    "fontSize": 11,
    "balloon":{
        "fadeOutDuration": 0.1,
        "borderThickness": 2,
        "shadowAlpha": 0,
        "fillAlpha": 0.9,
        "color": "#555",
        "fixedPosition": false,
        "offsetY": 0
    },
    "chartScrollbar": {
        "autoGridCount": true,
        "scrollbarHeight": 20,
        "backgroundColor": "#F2F2F2",
        "backgroundAlpha": 0.5,
        "selectedBackgroundColor": "#CCC",
        "selectedBackgroundAlpha": 0.3,
        "color": "#777"
    },
    "chartCursor":{
        "cursorAlpha": 0.1,
        "categoryBalloonColor": "#555",
        "categoryBalloonDateFormat": "MMM",
        "graphBulletAlpha": 0.7,
        "graphBulletSize": 1
    },
    "theme": "light",
    "categoryAxis": {
        "gridPosition": "start",
        "gridAlpha": 0,
        "axisAlpha": 0,
        "title": "Month",
        "parseDates": true,
        "minPeriod": "MM",
        "boldPeriodBeginning": false,
        "titleBold": false,
        "dateFormats": [
            {
                period: 'fff',
                format: 'JJ:NN:SS'
            }, 
            {
                period: 'ss',
                format: 'JJ:NN:SS'
            }, 
            {
                period: 'mm',
                format: 'JJ:NN'
            }, 
            {
                period: 'hh',
                format: 'JJ:NN'
            }, 
            {
                period: 'DD',
                format: 'MMM DD'
            }, 
            {
                period: 'WW',
                format: 'MMM DD'
            }, 
            {
                period: 'MM',
                format: 'MMM'
            }, 
            {
                period: 'YYYY',
                format: 'MMM'
            }
       ...