❮ Highcharts Guage Solid Highcharts Heat Maps ❯

Adding Regression Line to Highcharts Scatter Plot

The following example demonstrates adding a regression line to a scatter plot.

We have already learned the basic configuration syntax of Highcharts in previous chapters. Now, let's look at other configurations.

Configuration

Series Configuration

Set the type property of the series to line/scatter, where series.type describes the type of data series. The default value is "line".

var series = {
   type: 'scatter'
};

Example

Filename: highcharts_combinations_scatter.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts Tutorial | tutorialpro.org(tutorialpro.org)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var title = {
      text: 'Adding Regression Line to Scatter Plot'   
   };
   var xAxis = {
      min: -0.5,
      max: 5.5
   };
   var yAxis= {
      min: 0
   };
   var series= [{
            type: 'line',
            name: 'Regression Line',
            data: [[0, 1.11], [5, 4.51]],
            marker: {
                enabled: false
            },
            states: {
                hover: {
                    lineWidth: 0
                }
            },
            enableMouseTracking: false
        }, {
            type: 'scatter',
            name: 'Observation Points',
            data: [1, 1.5, 2.8, 3.5, 3.9, 4.2],
            marker: {
                radius: 4
            }
        }
   ];     

   var json = {};   
   json.title = title;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.series = series;
   $('#container').highcharts(json);  
});
</script>
</body>
</html>

Try it Yourself »

The output of the above example is:

Highcharts Combinations Chart

❮ Highcharts Guage Solid Highcharts Heat Maps ❯