Highcharts Demo

author(s): Torstein Hønsi

by HemalathaThanigaivel

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

var colors = Highcharts.getOptions().colors;
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {

 var test = Highcharts.chart('container', {
        chart: {
            zoomType: 'x'
        },
        title: {
            text: 'USD to EUR exchange rate over time'
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            title: {
                text: 'Exchange rate'
            },
          
         //   maxpadding : 0.02
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
             //   fillColor: {
             //       linearGradient: {
               //         x1: 0,
               //         y1: 0,
                //        x2: 0,
                //        y2: 1
              //      },
                //    stops: [
                     // [0, Highcharts.getOptions().colors[0]],
                     //   [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                //    ]
            //    },
                marker: {
                    radius: 2
                },
                lineWidth: 1,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },

        series: [{
            type: 'area',
            name: 'USD to EUR',
            data: data,
            zoneAxis: 'x',
            zones: [{
              value: Date.UTC(2013, 5),
              color: colors[2]
            }, {
              value: Date.UTC(2014, 6),
              color: colors[5]
            }, {
              value: Date.UTC(2015, 4),
              color: colors[2]
    ...