How to control the width of bar charts in chartjs?

52 Views Asked by Anas Taqy At 13 March 2024 at 05:24

The bars in my bar chart using chartsjs are too wide. How can i make them thinner? Here is my code

<body>
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
  <canvas id="myChart" ></canvas>
</div> 
<script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js "></script>
<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Males', 'Females'],
      datasets: [{
      label: 'Students Registrations by Gender',
      data: [<?php echo $maleCount; ?>, <?php echo $femaleCount; ?>],
      borderWidth: 1,
      backgroundColor: ['rgb(54, 162, 235)', 'rgb(255, 99, 132)' ]
      }] 
    }
  });
</script>

</body>

I tried many options from chartsjs.org, but none of them fixed my problem.

Original Q&A

There are 1 best solutions below

Ken Lee On 13 March 2024 at 05:57 BEST ANSWER

For barchart in chartjs , you may specify the barThickness value in the option block, such as

 , options: {
   barThickness:50
 }

So change

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

const ctx = document.getElementById('myChart');
new Chart(ctx, 
  { type: 'bar', 
  data: { labels: ['Males', 'Females'], 
  datasets: 
  [{ label: 'Students Registrations by Gender', 
  data: [100,200 ], 
  borderWidth: 1, 
  backgroundColor: 
  ['rgb(54, 162, 235)', 'rgb(255, 99, 132)' ] }] } 
}
  );
</script>

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

const ctx = document.getElementById('myChart');
new Chart(ctx, 
  { type: 'bar', 
  data: { labels: ['Males', 'Females'], 
  datasets: 
  [{ label: 'Students Registrations by Gender', 
  data: [100,200 ], 
  borderWidth: 1, 
  backgroundColor: 
  ['rgb(54, 162, 235)', 'rgb(255, 99, 132)' ] }] } 

 , options: {
   barThickness:50
 }

}
  );

</script>

enter image description here 1

will become the following (after specifying barThickness):

enter image description here 2

How to control the width of bar charts in chartjs?

There are 1 best solutions below

Related Questions in CHARTS

Related Questions in CHART.JS

Related Questions in WIDTH

Trending Questions

Popular # Hahtags

Popular Questions