index.html

## index.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example SlopeGraph</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>

<script type="text/javascript">

$(function () {
    $('#container').highcharts({
    chart: {
        renderTo:'container',
        defaultSeriesType:'line',
        marginTop:100
    },
    title:{
        text:'Current Receipts of Government as a<br/>Percentage of Gross Domestic<br/>Product, 1970 and 1979'
    },
    legend:{
        enabled:false
    },
    tooltip: {
        formatter: function() {
            return this.series.name + ' ' + this.y;
        }
    },
    xAxis: {
        opposite:true,
        lineColor:'#999',
        categories:['1970','1979'],
        title:{
            text:''
        },
        labels:{
            style:{
                fontWeight:'bold'
            }
        }
    },
    yAxis: {
        gridLineWidth:0,
        labels:{
            enabled:false,
        },
        title:{
            text:'',
       }
    },
    plotOptions: {
        line:{
            lineWidth:2,
            shadow:false,
            color:'#666',
            marker:{
                radius:2,
                symbol: 'circle'
            },
            dataLabels:{
                enabled:true,
                align:'left',
                x:10,
                y:0,
                formatter:function(){
                    if(this.x == 1979){
                        return this.series.name + ' ' + this.y;
                    }
                }
            }
        },
        scatter:{
            shadow:false,
            color:'#666',
            marker:{
                radius:2
            },
            dataLabels:{
                enabled:true,
                align:'right',
                x:-10,
                y:0,
                formatter:function(){
                    return this.point.name + ' ' + this.y;
                }
            }
        }
    },
    series: [{
        name:'Sweden',
        data: [46.9,57.4]
    },{
        name:'Netherlands',
        data: [44,55.8]
    },{
         name:'Norway',
         data: [43.5,52.2]
     },{
         name:'Britain',
         data: [40.7,39]
     },{
         name:'France',
         data: [39,43.4]
     },{
         name:'Germany',
         data: [37.5,42.9]
     },{
         name:'Belgium',
         data: [35.2,43.2]
     },{
         type:'scatter',
         data: [{'x':0,'y':46.9,'name':'Sweden'},
             {'x':0,'y':44,'name':'Netherlands'},
             {'x':0,'y':43.5,'name':'Norway'},
             {'x':0,'y':40.7,'name':'Britain'},
             {'x':0,'y':39,'name':'France'},
             {'x':0,'y':37.5,'name':'Germany'},
             {'x':0,'y':35.2,'name':'Belgium'}]
      }]
  });
});

</script>
</head>
<body>

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

</body>
</html>