Toggle Logarithmic Feature

Answer

See the script below:

widget.on('processresult', function(se, ev){
ev.result.chart.spacing = [20, 20, 77, 20 ]
});

widget.on("domready", function(w){


chart = w.chart[0][Object.keys(w.chart[0])[0]].hc;
chartContainer = $('.highcharts-container', element);

let currentLogButton = document.getElementById(`log-button-${widget.oid}`);

if(currentLogButton)
currentLogButton.remove();

let currentLinearButton = document.getElementById(`linear-button-${widget.oid}`);

if(currentLinearButton)
currentLinearButton.remove();

logButton = `<button style="width:150px; height:30px; border-radius:15px 0px 0px 15px; cursor:pointer; border: 1px solid gray;" id="log-button-${w.oid}">Logarithmic</button>`
chartContainer.before(logButton)

linearButton = `<button style="width:150px; height:30px;border-radius:0px 15px 15px 0px; cursor:pointer; border: 1px solid gray; " id="linear-button-${w.oid}">Linear</button>`
chartContainer.before(linearButton)

chartContainer.height(chartContainer.height() - 77);

const logStatus = !!w.style.xAxis.logarithmic;

const logButtonSelect = document.getElementById(`log-button-${widget.oid}`);
const linearButtonSelect = document.getElementById(`linear-button-${widget.oid}`);

if (logStatus) {
setButtonActive(logButtonSelect);
setButtonInactive(linearButtonSelect);
} else {
setButtonActive(linearButtonSelect);
setButtonInactive(logButtonSelect);
}

logButtonSelect.addEventListener('click', (e) => {
widget.style.xAxis.logarithmic = true;
widget.refresh();
})

linearButtonSelect.addEventListener('click', (e) => {
widget.style.xAxis.logarithmic = false;
widget.refresh();
})

});

function setButtonActive(element) {
element.style.backgroundColor = '#4960a6';
element.style.color = '#ffffff'
}

function setButtonInactive(element) {
element.style.backgroundColor = '#ffffff';
element.style.color = '#4960a6'
}