javascriptchart.js

Chartjs only showing first digit in data


I am making a stacked chart to display how many hours have been made on a project. The only problem is that chartjs is only displaying the first digit of the data. So it's not that it can't read the data, it just only reads the first digit.

Here is my chartjs code. Added array for simplicity.

var datasetes= new Array();
datasets[0] = [
    "label" => "roland",
    "data" => "336",
];
datasets[1] = [
    "label" => "roland",
    "data" => "336",
];
datasets[2] = [
    "label" => "koen",
      "data" => "2",
];
datasets[3] = [
    "label" => "gerald",
    "data" => "43",
];

var total = 645; // Does not matter right now what the total is.

var ctx = document.getElementById('projectOfferte').getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['medewerkers'],
                    datasets: datasetes,
                },
                options: {
                    plugins: {
                        title: {
                            display: true,
                            text: "Totaal Aantal uur: "+total ,
                            position: 'top',
                            align: 'start',
                        },
                    },
                    scales: {
                        y: {
                            stacked: true,
                        },
                        x: {
                            stacked: true
                        }
                    }
                }
            })

Image of chart:

Image of chart

I tried making the data as an integer, but then it does not even display the data.


Solution

  • Here's a rough translation of what I think you are trying to achieve. Your data has been inlined. Added the use of the stack parameter to associate each dataset with the same stack.

    Your issue can be isolated to the use of a string for the datasets "data" values and not an array. So your approach:

    datasets: [ { "data": "336" } ]
    

    produces the issue (as shown in this jsfiddle) but

    datasets: [ { "data": [ "336" ] } ]
    

    would work as shown in this jsfiddle

    (Modified the dataset slightly for demo purposes.)

    Note in the version below data are numbers (not strings) but makes no difference.

    const config = {
      type: 'bar',
      data: {
        labels: ['medewerkers'],
        datasets: [
        {
          label : 'roland',
          data: [ 336 ],
          backgroundColor: 'red',
          stack: 1
        }, 
        {
          label : 'koen',
          data: [ 25 ],
          backgroundColor: 'blue',
          stack: 1
        }, 
        {
          label : 'gerald',
          data: [ 43 ],
          backgroundColor: 'green',
          stack: 1
        }
        ]
      },
      options: {
          plugins: {
          title: {
              display: true,
              text: "Totaal Aantal uur: "+645 ,
              position: 'top',
              align: 'start',
          }
      },
      scales: {
          y: {
              stacked: true,
          },
          x: {
              stacked: true
          }
      }
    }
      }
    
    const reportOutput = new Chart(
      document.getElementById('chart_display'),
      config
    );
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.8.0/dist/chart.min.js"></script>
    <html>
    
    <head></head>
    
    <body>
      <h1>
        Stacked Bar Chart (chart.js)
      </h1>
      <canvas id="chart_display"></canvas>
    </body>
    
    </html>