negative values missing in logarithmic mode

Question

so after going all over other questions on SOF.
I'm using HighchartsReact wrapper for Highcharts.

Expected behaviour:
show negative values in stacked column chart even in logarithmic scale. When toggling a series that has y values < 0, log scale hides them. When toggling back to linear scale the hidden points should be visible again.

Actual behaviour:
negative values disappear when going from linear to logarithmic. in addition when going back to linear the negative value that were seen in linear scale before - disappear and are not part of the chart. It was working before several weeks and stopped working suddenly.

Live demo with steps to reproduce:

Product version 9.3.2

How can I add this function with using HighchartsReact? I tried passing a callback and also inside React.useEffect to use the chart ref. but anything I do, still negative values are missing. and going back to linear just removes the original negative values from series.

(function (H) {
    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;
            };
        }
    });
}(Highcharts));

user_12171673 · Answer

You need to define the variable chart if you want to see how is changing.

const chart = Highcharts.chart('container', { 
});

Live demo: https://jsfiddle.net/BlackLabel/x1zp347m/

Here is the official Highcharts React wrapper where you will find how to use Highcharts at the React. https://github.com/highcharts/highcharts-react#basic-usage-example

EDIT --------------------------------------------------------------

To extending the chart custom code or edit the core you can fire function after imports.

How to extending Higcharts code: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

import React from 'react'
import { render } from 'react-dom'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

(function (H) {
  H.addEvent(H.Chart, 'load', function (e) {
      var chart = e.target;
      H.addEvent(chart.container, 'click', function (e) {
          e = chart.pointer.normalize(e);
          console.log('Clicked chart at ' + e.chartX + ', ' + e.chartY);
      });
      H.addEvent(chart.xAxis[0], 'afterSetExtremes', function (e) {
          console.log('Set extremes to ' + e.min + ', ' + e.max);
      });
  });
}(Highcharts));

const options = {
  title: {
    text: 'My chart'
  },
  plotOptions: {
    series: {
        enableMouseTracking: true
    }
},
  series: [{
    data: [1, 2, 3]
  }]
}

const App = () => 
  


render(, document.getElementById('root'))

https://stackblitz.com/edit/react-t6rh4c?file=components%2FChart.jsx

negative values missing in logarithmic mode

1 Answers