Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- <script src="https://code.highcharts.com/modules/exporting.js"></script>
 -->
<div id="container" ></div>

CSS

#container{
  min-width:310px;
  height: 400px; 
  /* margin: 0 auto; */
  border-color:blue;
  border-width:1px;
  border-style:solid;
}

#echi{
  height:250px;
  width:200px;
  border-color:red;
  border-width:1px;
  border-style:solid;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'spline
    },
    title: {
        text: 'Historic and Estimated Worldwide Population Growth by Region'
    },
    subtitle: {
        text: 'Source: Wikipedia.org'
    },
    xAxis: {
        categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
        tickmarkPlacement: 'on',
        title: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: 'Billions'
        },
        labels: {
            formatter: function () {
                return this.value / 1000;
            }
        }
    },
    tooltip: {
        split: true,
        valueSuffix: ' millions'
    },
    plotOptions: {
        spline: {
            stacking: 'stream',
            lineColor: '#666666',
            lineWidth: 1,
            marker: {
                lineWidth: 1,
                lineColor: '#666666'
            }
        }
    },
    series: [{
        name: 'Asia',
        data: [502, 635, 809, 947, 1402, 3634, 5268]
    }, {
        name: 'Africa',
        data: [106, 107, 111, 133, 221, 767, 1766]
    }, {
        name: 'Europe',
        data: [163, 203, 276, 408, 547, 729, 628]
    }, {
        name: 'America',
        data: [18, 31, 54, 156, 339, 818, 1201]
    }, {
        name: 'Oceania',
        data: [2, 2, 2, 6, 13, 30, 46]
    }]
});
/* Highcharts.chart('container',{
  chart:{
    type: 'bar'
  },
  title:{
    text:'Fruit'
  },
  xAxis:{
    categories:['Apples','Mangoes'],
    title:{
      text:'hello bro'
    }
  },
  yAxis:{
    categories:['1','2','3','4','5'],
    title:{
      text:'hello'
    }
  },
  series: [{
            name: 'Jane',
            data: [1, 0],
        }, {
            name: 'John',
            data: [5, 7]
        }]
 
});  */