CODEWITHSUNDEEP
javascriptchart.js
haebel
haebel

Reputation: 35

Chart js logarithmic line chart showing NaN values instead of null

As far as I understand it, null values aren't shown in Chart js line charts and the line is interrupted at those points.

This is the functionality that I want and it works well with the y-axis type 'linear', but as soon as I change the type to 'logarithmic', all the null values are still being shown at the position of 0 on the chart and the tooltip shows NaN when hovering over those points.

Below are two pictures of the same chart, one with linear and the other with logarithmic type:

enter image description here ^linear enter image description here ^logarithmic

Would it somehow be possible to hide the NaN datapoints like seen in the first picture?

The code I have is a pretty basic chart, so I don't see how this could be an error in my code, as the only difference it takes to break it is the change of the type.
I searched for other people who had encountered this problem or for some entry in the Chart js documentation, but without luck.

If anyone has created a solution to something like this already or can think of a workaround for this strange effect, I would be very thankful for any response!

EDIT
Here is an example of my html and javascript files for creating a new chart, based off of the basic example from user @DJ's answer:

HTML: 

<div class="content-container">
    <canvas id="newChart" class="chart"></canvas>
</div>

javascript:

angular.module('myApp').controller('MobileAnalysisController', function () {

    init();
    return;

    function init() {
        drawNewChart();
    }

    function drawNewChart() {
        var myNewChart = {
            type: "line",
            data: {
                labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                datasets: [
                    {
                        data: [null, null, 106, 106, 107, 111, 133, 221, 783, 2478],
                    }
                ]
            },
            options: {
                scales: {
                    yAxes: [{
                        type: 'logarithmic',
                    }]
                }
            }
        };
        var newCtx = document.getElementById("newChart").getContext("2d");
        var newChart = new Chart(newCtx, myNewChart);
        newChart.update();
    }
});

But even this still gives me a result where the null/NaN values should be invisible, but aren't:

enter image description here

Upvotes: 2

Views: 1749

Answers (1)

DJ&#39;
DJ&#39;

Reputation: 171

I've made a simple line chart to test the empty values. But in my test, the values are not shown in the graph. So I'm not sure what settings you are using. Can you show some code?

This was my test case:

import "./styles.css";
import Chart from "chart.js";

new Chart(document.getElementById("line-chart"), {
  type: "line",
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    datasets: [
      {
        data: [NaN, NaN, 106, 106, 107, 111, 133, 221, 783, 2478],
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
          type: 'logarithmic',
      }]
    }
  }
});

Upvotes: 3

Related Questions