chartjs is issue with large amount data

Question

My chart js code is like given below:

var userLowerList = JSON.parse('["5 Mar", "6 Mar", "7 Mar", "8 Mar", "9 Mar", "10 Mar", "11 Mar"]')
    var userDataList = JSON.parse('[[1000000, 0, 0, 0, 0, 0, 0], ["-0", "-0", "-0", "-50", "-0", "-0", "-0"]]')

    var data = {
        labels: userLowerList,
        datasets: [{
            label: "Credit",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            data: userDataList[0],
        },{
            label: "Debit",
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 2,
            data: [-65, -59, -20],
        }, 
        ]
    };

    var myBarChart = new Chart($("#myChart"), {
        type: 'bar',
        data: data,
        maintainAspectRatio: false,
            options: {
                scales: {
                    yAxes: [{
                        stacked: true,
                        id: 'first-y-axis',
                        position: 'left',
                        ticks: {
                            suggestedMin: 2,
                            callback: function (label, index, labels) {
                                return label;
                            }
                        }
                    }],
                    xAxes: [{
                        barThickness: 20,
                        maxBarThickness: 20,
                        stacked: true
                    }]
                }
            }
    });

And after this i am getting result like :

enter image description here

why it is not displaying another values in chart . if i uses small values it is working fine . it is not working with large data can anyone please help me related this

Answer 1

There is no any issue with your code. Its just a scale problem. I adjusted your yAxis. It needs a little bit much more work because you have negative values and log(0) is undefined.

var userLowerList = JSON.parse('["5 Mar", "6 Mar", "7 Mar", "8 Mar", "9 Mar", "10 Mar", "11 Mar"]')
var userDataList = JSON.parse('[[10000000, 10, 0, 0, 0, 0, 0],  ["-0", "-0", "-0", "-50", "-0", "-0", "-0"]]')

var data = {
  labels: userLowerList,
  datasets: [{
    label: "Credit",
    backgroundColor: "rgba(255,99,132,0.2)",
    borderColor: "rgba(255,99,132,1)",
    borderWidth: 2,
    data: userDataList[0],
  }, {
    label: "Debit",
    backgroundColor: "rgba(54, 162, 235, 0.2)",
    borderColor: "rgb(54, 162, 235)",
    borderWidth: 2,
    data: [-65, -59, -20],
  }, ]
};

var myBarChart = new Chart($("#chartJSContainer"), {
  type: 'bar',
  data: data,
  maintainAspectRatio: false,
  options: {
    scales: {
      yAxes: [{
        stacked: true,
        id: 'first-y-axis',
        position: 'left',
        type: 'logarithmic',
        ticks: {
          callback: function(value, index, values) {
            if (value === 1000000) return "1M";
            if (value === 100000) return "100K";
            if (value === 10000) return "10K";
            if (value === 1000) return "1K";
            if (value === 100) return "100";
            if (value === 10) return "10";
            if (value === 0) return "0";
            return null;
          }

        }
      }],
      xAxes: [{
        barThickness: 20,
        maxBarThickness: 20,
        stacked: true
      }]
    }
  }
});

https://jsfiddle.net/0pL9zjd5/

Answer 2

Your program is correct, you have a scale problem between both curves,

when you are using high values for the first datas, the second datas are very very small, so the bar is just one or zero pixel, so the datas are not visible for second bar graph.

i suggest you to create a second y axis like this sample 2 axix Y

if you add another yaxis, you couldnt stacked value, or you have to adapt the value form first graph to second graph..

if you have big difference between values, you could modify the type of axis, logaritmic and so on, read the documentation, or see the answer @quentinroger

var config = {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      type: 'bar',
      barThickness: 30,
      label: 'Credit',
      backgroundColor: "green",
      yAxisID: 'A',
      data: [1500000, 0, 1000, 81, 56, 85, 40],
    }, {
      type: 'bar',
      label: 'Debit',
      backgroundColor: "red",
      yAxisID: 'B',
      data: [-65, 0, -80, -81, -56, -85, -40]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
          id: 'A',
          stacked: true,
          type: 'logarithmic',
          ticks: {
            max: 10000000,
            callback: function(value, index, values) {
              if (value === 10000000) return "10M";
              if (value === 1000000) return "1M";
              if (value === 100000) return "100K";
              if (value === 10000) return "10K";
              if (value === 1000) return "1K";
              if (value === 100) return "100";
              if (value === 10) return "10";
              if (value === 0) return "0";
              return null;
            }

          }
        },
        {
          id: 'B',
          position: 'right',
          stacked: true,
          max: 0,
          beginAtZero: true
        }
      ]
    }
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart"></canvas>