Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<button id="log-scale-toggle">Log</button>

JavaScript

var series = [{
    data: [-20, -10, 25, -5],
  }, {
    data: [-10, 10, -17, 10],
  }]


const chart = Highcharts.chart('container', {
  chart: {
    type: 'column',
  },
	xAxis: {

	},
  yAxis: {
        title: {
        enabled: false,
      },
    type: 'linear',
    tickAmount: 5,
    stackLabels: {
      enabled: true,
      formatter: function() {
        if (this.total) {
          return this.total.toFixed(1);
        }
      }
    },
     custom: {
        allowNegativeLog: true,
      },
  },
    plotOptions: {
    column: {
      stacking: "normal",
      borderWidth: 0,
      pointWidth: null,
      maxPointWidth: 50,
      groupPadding: 0.05,
      pointPadding: 0.025,
      dataLabels: {
        enabled: false,
      },
    },
  },
  legend: {
  	enabled: false,
  },
  series: series,
});

document.getElementById('log-scale-toggle').addEventListener('click', () => {
  var x = document.getElementById('log-scale-toggle');
  
  chart.update({
    yAxis: {
      type: x.innerHTML === 'Log' ? 'logarithmic' : 'linear'
    }
  });
  
  if(x.innerHTML === 'Log') {
     x.innerHTML = 'Linear' 
  } else {
     x.innerHTML = 'Log'
  }

});