javascript - Highcharts: Can't plot zero or subzero values on a logarithmic axis

Question

I am using highcharts, earlier it was working fine but recently it started breaking and giving the error,

Can't plot zero or subzero values on a logarithmic axis

onInit() {
  this.Highcharts.Axis.prototype.allowNegativeLog = true;
  this.Highcharts.Axis.prototype.log2lin = function (num: number): number {
    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;
  };
  this.Highcharts.Axis.prototype.allowNegativeLog = true;
  this.Highcharts.Axis.prototype.lin2log = function (num: number): number {
    const isNegative = num <= 0;
    const absNum = Math.abs(num);
    let result = Math.pow(10, absNum);
    if (result < 10) {
      result = (10 * (result - 1)) / (10 - 1);
    }
    return isNegative ? -result : result;
  };

  this.chartOptions = {
    chart: {
      height: "60%",
      events: {
        drilldown(event: any): void {
          const geoPoint = event.point;
          map.isMapCardActive = true;
          map.mapView.nativeElement
            .querySelectorAll(".highcharts-drilldown-point")
            .forEach((el) => {
              if (
                el.point.dataObj &&
                geoPoint.dataObj.locationCode.rawvalue ===
                  el.point.dataObj.locationCode.rawvalue
              ) {
                return;
              }
              el.classList.add("non-highlight-area");
            });
          map.mapCard.positionthisCard(geoPoint);
        },
      },
    },
    title: {
      text: "",
    },
    subtitle: {
      text: "Click on bar",
    },
    legend: {
      layout: "horizontal",
      x: -100,
      symbolHeight: 6,
      symbolWidth: 155,
      useHTML: true,
      title: {
        text: "HEADCOUNT",
      },
    },
    credits: {
      enabled: false,
    },
    colorAxis: {
      min: axisMinMax.min.value,
      max: axisMinMax.max.value,
      minColor: "#F5F5F5",
      maxColor: "#DB9500",
      type: "logarithmic",
      allowNegativeLog: true,
      tickInterval: 2,
      labels: {
        formatter: function (): number {
          if (this.value === axisMinMax.min.value) {
            //return axisMinMax.min.label;
          } else if (this.value === 0.00001) {
            return 0;
          }
          //return axisMinMax.max.label;
        },
      },
    },
    mapNavigation: {
      enableButtons: false,
    },
    drilldown: {
      activeDataLabelStyle: {
        textDecoration: "none",
      },
    },
    plotOptions: {
      map: {
        states: {
          select: {
            color: "#DB9500",
          },
        },
      },
    },
    tooltip: { enabled: false },
    series: [
      {
        name: "Headcount",
        data: data,
        dataLabels: {
          enabled: true,
          color: "#FFFFFF",
          format: "{point.properties.postal-code}",
        },
      },
    ],
  };
}

The above is my code with appending data, actually I am rendering a US map using highcharts. can someone please help me on where I am mistaken. Thanks.

question from:https://stackoverflow.com/questions/66055236/highcharts-cant-plot-zero-or-subzero-values-on-a-logarithmic-axis

Answer 1

Waitting for answers