Logarithmic YAxis

The yAxis interval creation is messed up for negative Values

by Ayan Ghatak

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>

<div id="hc-chartContainer" style="height: 300px; width: 100%;">
</div>

JavaScript

var config = {
  title: {
    text: "CanvasJS",
  },
  "axisY": [{
    "logarithmic": true
  }],
  "data": [{
      "dataPoints": [{
          "y": 78.90594777736679,
          "x": 1553834880000
        },
        {
          "y": 77.82925410222002,
          "x": 1553834940000
        },
        {
          "y": 78.2776205425544,
          "x": 1553835000000
        }
      ],
      "type": "line",
      "xValueType": "dateTime",
      "name": "Series 1"
    },
    {
      "dataPoints": [{
          "y": -0.000007314814396825603,
          "x": 1553834820000
        },
        {
          "y": 0.010429884533021861,
          "x": 1553834880000
        },
        {
          "y": 0.0020770544744034263,
          "x": 1553834940000
        }
      ],
      "type": "line",
      "xValueType": "dateTime",
      "name": "Series 2"
    }
  ]
};


window.onload = function() {
  var chart = new CanvasJS.Chart("chartContainer", config);
  chart.render();
  renderHC();
}

function renderHC() {
  Highcharts.chart('hc-chartContainer', {
    title: {
      text: 'Highcharts'
    },
    yAxis: {
      type: 'logarithmic',
    },
    series: config.data.map(({
      dataPoints
    }) => ({
      data: dataPoints.map(({
        y
      }) => y)
    })),
  });
}