Chart js - Customize chart

Question

I'm trying to edit a chart but i can't. I want to change the canvas height to a fix height. The chart start always with 1156px X 867. And i need to change also the heigh of each bar.

So, how can i change the size of canvas and how can i change the height of each bar. I have this code:

var ctx = document.getElementById("chart");
          var myChart = new Chart(ctx, {
              type: 'horizontalBar',
              data: {
                  labels: data['labels'],
                  datasets: [{
                      label: '# of Votes',
                      data: [12, 19, 3, 5, 2, 3],
                      backgroundColor: [
                          'rgba(255, 99, 132, 0.2)',
                          'rgba(54, 162, 235, 0.2)',
                          'rgba(255, 206, 86, 0.2)',
                          'rgba(75, 192, 192, 0.2)',
                          'rgba(153, 102, 255, 0.2)',
                          'rgba(255, 159, 64, 0.2)'
                      ],
                      borderColor: [
                          'rgba(255,99,132,1)',
                          'rgba(54, 162, 235, 1)',
                          'rgba(255, 206, 86, 1)',
                          'rgba(75, 192, 192, 1)',
                          'rgba(153, 102, 255, 1)',
                          'rgba(255, 159, 64, 1)'
                      ],
                      borderWidth: 1
                  }]
              },
              options: {
                  scales: {
                      yAxes: [{
                          ticks: {
                              beginAtZero:true
                          }
                      }]
                  }
              }
          });

html:

<canvas id="chartMentes" width="400" height="300"></canvas>

May be this one will useful for you: https://stackoverflow.com/a/48580585/7186739 — Billu, Mar 21 '18 at 07:03

score 0 · Answer 1 · answered May 29 '17 at 10:21

How can I change the size of canvas?

Usually, ChartJS displays chart in a responsive manner, meaning it won't take canvas's width and height (set by user) into consideration.

To get around this, you need to set responsive property to false in your chart options, like so ...

options: {
  responsive: false,
  ...
}

Now, you could set canvas's width and height as per your requirement.

<canvas id="chartMentes" width="400" height="800"></canvas>

How can I change the height of each bar?

You can change the height of each bar by setting the barThickness property accordingly for y-axis in the chart options, like so ...

options: {
    scales: {
      yAxes: [{
            barThickness: 10,  //set that suits the best
            ...
}

ᴅᴇᴍᴏ

var ctx = document.getElementById("chartMentes").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
             'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'],
            borderColor: [
             'rgba(255,99,132,1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'],
            borderWidth: 1
        }]
    },
    options: {
        responsive: false,
        scales: {
            yAxes: [{
                barThickness: 10,
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chartMentes" width="300" height="200"></canvas>

Chart js - Customize chart

1 Answers1