I know Highcharts doesn’t recommend negative values when applying the logarithmic scale but they provide us with a logic to overcome this. This logics works for yAxis but not for the xAxis. Check the Fiddle below JSFiddle
`function allowNegativeValues(H) {
/* eslint-disable no-underscore-dangle */
const logAdditions =
H._modules[‘Core/Axis/LogarithmicAxis.js’].Additions.prototype;
H.addEvent(H.Axis, 'afterInit', function () {
const logarithmic = this.logarithmic;
if (logarithmic && this.options.custom.allowNegativeLog) {
// Avoid errors on negative numbers on a log axis
this.positiveValuesOnly = false;
// Override the converter functions
logarithmic.log2lin = num => {
const isNegative = num < 0;
let adjustedNum = Math.abs(num);
if (adjustedNum < 10) {
adjustedNum += (10 - adjustedNum) / 10;
}
const result = Math.log(adjustedNum) / Math.LN10;
return isNegative ? -result : result;
};
logarithmic.lin2log = num => {
const isNegative = num < 0;
let result = Math.pow(10, Math.abs(num));
if (result < 10) {
result = (10 * (result - 1)) / (10 - 1);
}
return isNegative ? -result : result;
};
}
});
// Add support for negative axis values to the tick positioning function.
H.wrap(logAdditions, 'getLogTickPositions', function (
proceed,
interval,
min,
max,
minor
) {
if (
!this.axis.options.custom.allowNegativeLog ||
interval >= 0.5 ||
interval < 0.08
) {
return proceed.call(this, interval, min, max, minor);
}
const log = this,
roundedMin = Math.floor(min),
positions = [];
let intermediate,
i,
j,
len,
pos,
lastPos,
break2;
if (interval > 0.3) {
intermediate = [1, 2, 4];
} else if (interval > 0.15) {
intermediate = [1, 2, 4, 6, 8];
} else {
intermediate = [1, 2, 3, 4, 5, 6, 7, 8, 9];
}
for (i = roundedMin; i < max + 1 && !break2; i++) {
len = intermediate.length;
if (i <= 0) {
for (j = len - 1; j >= 0 && !break2; j--) {
pos = -log.log2lin(
(log.lin2log(-i) || 1) * intermediate[j]
);
if (
pos > min &&
(!minor || lastPos <= max) &&
typeof lastPos !== 'undefined'
) {
positions.push(lastPos);
}
if (lastPos > max) {
break2 = true;
}
lastPos = pos;
}
if (lastPos < min || lastPos > max) {
lastPos = undefined;
}
}
if (i === 0 && min <= 0 && max >= 0) {
positions.push(0);
}
if (i >= 0) {
for (j = 0; j < len && !break2; j++) {
pos = log.log2lin((log.lin2log(i) || 1) * intermediate[j]);
if (
pos > min &&
(!minor || lastPos <= max) &&
typeof lastPos !== 'undefined'
) {
positions.push(lastPos);
}
if (lastPos > max) {
break2 = true;
}
lastPos = pos;
}
}
}
return positions;
});
}`
and click on the “Toggle xAxis type” button underneath the graph, when we apply the logarithmic then the tickPositions disappear hence we don’t apply the logarithmic scale for the xAxis but if you try it for the yAxis it will work. I would appreciate help on this… Thank you
I tried the provided logic from Highcharts which is included in the Fiddle but no success so far.
Here’s the logic provided by Highcharts to allow negative log scales
KENNY Lazer is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.