[Chartjs]-Chartjs is issue with large amount data

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/

0👍

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>

Leave a comment