How to make the regression line through the origin in highcharts - highcharts

Question

I am trying to make the regression to start from the origin , x=y=0. Is this possible to do. some say it is not good to do so but for some purposes I need to make the line through the origin. I am using highcharts.

Answer 1

How about adding a point to the regression series with x = y = 0 and setting the marker to disabled in order to hide it?
let discipline = [
{
name: "Football",
data: "football"
}
];
Highcharts.getJSON(
"https://raw.githubusercontent.com/mekhatria/demo_highcharts/master/olympic2012.json?callback=?",
function (data) {
function regression(arrWeight, arrHeight) {
let r, sy, sx, b, a, meanX, meanY;
r = jStat.corrcoeff(arrHeight, arrWeight);
sy = jStat.stdev(arrWeight);
sx = jStat.stdev(arrHeight);
meanY = jStat(arrWeight).mean();
meanX = jStat(arrHeight).mean();
b = r * (sy / sx);
a = meanY - meanX * b;
//Set up a line
let y1, y2, x1, x2;
x1 = jStat.min(arrHeight);
x2 = jStat.max(arrHeight);
y1 = a + b * x1;
y2 = a + b * x2;
return {
line: [
//Add x = 0, y = 0 to your regression logic?
{x: 0, y: 0, marker: {enabled: false}},
{x: x1, y: y1, marker: {enabled: true}},
{x: x2, y: y2, marker: {enabled: true}},
],
r
};
}
const getData = (continentName) => {
let temp = [],
tempWeight = [],
tempHeight = [];
data.forEach((elm) => {
if (
elm.continent == continentName &&
elm.weight > 0 &&
elm.height > 0
) {
temp.push([elm.height, elm.weight]);
tempWeight.push(elm.weight);
tempHeight.push(elm.height);
}
});
let { line, r } = regression(tempWeight, tempHeight);
return [temp, line, r];
};
const getDataSport = (sportName) => {
let temp = [],
tempWeight = [],
tempHeight = [];
data.forEach((elm) => {
if (elm.sport == sportName && elm.weight > 0 && elm.height > 0) {
temp.push([elm.height, elm.weight]);
tempWeight.push(elm.weight);
tempHeight.push(elm.height);
}
});
let { line, r } = regression(tempWeight, tempHeight);
return [temp, line, r];
};
let series = [],
visible = false,
index = 0,
activate = ["Football"];
discipline.forEach((e) => {
if (activate.indexOf(e.name) > -1) {
visible = true;
} else {
visible = false;
}
let [scatterData, line, r] = getDataSport(e.data);
series.push(
{
type: "scatter",
visible: visible,
name: e.name,
data: scatterData
},
{
name: e.name,
visible: visible,
r: r,
data: line
}
);
});
Highcharts.chart("container", {
chart: {
type: "line",
zoomType: "y",
},
title: {
text: "2012 Olympic football athletes' weight and height relationship"
},
xAxis: {
title: {
text: "Height"
},
labels: {
format: "{value} m"
},
},
yAxis: {
title: {
text: "Weight"
},
labels: {
format: "{value} kg"
}
},
legend: {
enabled: true
},
plotOptions: {
scatter: {
marker: {
radius: 2.5,
symbol: "circle",
states: {
hover: {
enabled: true,
lineColor: "rgb(100,100,100)"
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
},
line: {
lineWidth: 2.5
}
},
tooltip: {
formatter: function () {
if (this.series.data.length > 2) {
return (
this.series.name +
"<br/>Height: " +
this.x +
" m<br/>Weight: " +
this.y +
" kg"
);
} else {
return (
this.series.name +
"<br/>r: " +
this.series.userOptions.r.toFixed(2)
);
}
}
},
series: series
});
}
);
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jstat#latest/dist/jstat.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>