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>