Chartjs-Chartjs Horizontal Bar, the width of the Bars does not change

by

0👍

You are setting the data for each dataset using data property but in fact you have set some of the values to null, this might cause some problem. Try to modify your code like so using barThickness for each dataset :

var chrt = document.getElementById("chartId").getContext("2d");

var chartId = new Chart(chrt, {
   type: 'bar',
   data: {
      labels: ["Amkor-FJ", "ASE-CL", "ASE-KH", "ATMC", "Global7", "SSMC", "TSMC8", "TSTSTAT", "UMCF8E"],
      datasets: [
         {
            label: "Amkor-FJ",
            data: [99, null, null, null, null, null, null, null, null],
            backgroundColor: "yellow",
            borderColor: 'yellow',
            borderWidth: 1,
            barThickness: 20 // Set the width of the bars for this dataset
         },
         // Add other datasets here with their respective barThickness values
      ]
   },
   options: {
      // Add any other options as needed
   }
});

By the way, If you’d like to include legends for each items on the y axis, you can add a legend configuration like so :

var chartId = new Chart(chrt, {
   type: 'bar',
   data: {
      // Data and datasets here
   },
   options: {
      legend: {
         display: true,
         position: 'right', // Position of the legend
         labels: {
            boxWidth: 10, // Width of the legend color box
            padding: 10 // Padding between legend items
         }
      }
   }
});

Leave a comment