CODEWITHSUNDEEP
javascriptchartschart.js
Ranjith G N
Ranjith G N

Reputation: 23

Unexpected text "NaN" appearing near y-axis of the Chart

There is a unexpected text "NaN" appearing near the Y-axis of the chart when both the datasets(Capital and Expense) of a chart are hidden in chart created using Chartjs(Link) plugin. The chartType being used here is horizontalBar chart.

Also attached is a screenshot of how it looks when one of the dataset is hidden(Type 1) and the Type 2 shows the chart when both the datasets are hidden.

Link to fiddleJsFiddle

Upvotes: 1

Views: 3678

Answers (2)

Victor
Victor

Reputation: 124

UPDATE: This fix worked in chart.js version 2.5 (or lower), in version 2.6 they said it's fixed by default.

OLD ANSWER:

Hello, just change to this: (notice my callback on xAxis)

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: 'Capital',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }, {
      label: 'Expense',
      data: [4, 8, 6, 14, 12, 6],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true,
        ticks: {
          //this will fix your problem with NaN
          callback: function(label, index, labels) {
            return label ? label : '';
          }
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Can't really explain why is displaying that 'NaN', I think it's still trying to display the ticks even when there is no data. So, in that callback you make sure that data is displayed only if exists. I had the same problem on a chart and didn't found any answer anywhere, so this fix is something I came up with on the fly, but it's working. That callback is overriding ticks displayed data, so you can customize it as much as you want.

You can check this issue here too: Chart js Github

Upvotes: 3

Ranjith G N
Ranjith G N

Reputation: 23

I managed to solve the above issue by not allowing the user to hide all the datasets at same time ie., atleast one active dataset at all times. 

Fiddle link below

http://jsfiddle.net/znppphyf/1

Upvotes: 0

Related Questions