Set height of chart in Chart js

Question

I want to draw a horizontal bar chart with Chart js but it keeps scaling the chart instead of using the height I assign the canvas form the script   Is there any way to set the height of the graph from the script   See fiddle  Jsfidle  HTML   lt div class  graph  gt     lt div class  chart-legend  gt      lt  div gt     lt div class  chart  gt       lt canvas id  myChart  gt  lt  canvas gt     lt  div gt   lt  div gt    JavaScript  var ctx       myChart     ctx height 500    var myChart   new Chart ctx        type   horizontalBar       data            labels    Red    Blue    Yellow    Green    Purple    Orange            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                       maintainAspectRatio  false      options            scales                yAxes                     ticks                        beginAtZero true

User · Answer

I created a container and set it the desired height of the view port (depending on the number of charts or chart specific sizes):

.graph-container {
width: 100%;
height: 30vh;
}

To be dynamic to screen sizes I set the container as follows:

*Small media devices specific styles*/
@media screen and (max-width: 800px) {
.graph-container {
        display: block;
        float: none;
        width: 100%;
        margin-top: 0px;
        margin-right:0px;
        margin-left:0px;
        height: auto;
    }
}

Of course very important (as have been referred to numerous times) set the following option properties of your chart:

options:{
    maintainAspectRatio: false,
    responsive: true,
}

User · Answer

Just to add on to the answer given by  numediaweb   In case you re banging your head against the wall because after following the instructions to set maintainAspectRatio false  I originally copied my code from an example I got on a website on using Chart js with Angular 2             lt div style  display  block  gt             lt canvas baseChart                    datasets   chartData                     labels   chartLabels                     options   chartOptions                     legend   chartLegend                     colors   chartColors                     chartType   chartType  gt             lt  canvas gt           lt  div gt    To make this work correctly you must remove the embedded  and unnecessary  style  display  block   Instead define a class for the enclosing div  and define its height in CSS   Once you do that  the chart should have responsive width but fixed height

User · Answer

He s right  If you want to stay with jQuery you could do this  var ctx       myChart   0   ctx height   500    or  var ctx       myChart    ctx attr  height  500

User · Answer

Set the aspectRatio property of the chart to 0 did the trick for me         var ctx       myChart         ctx height 500        var myChart   new Chart ctx            type   horizontalBar           data                labels    Red    Blue    Yellow    Green    Purple    Orange                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                                   maintainAspectRatio  false          options                scales                    yAxes                         ticks                            beginAtZero true                                                                          myChart aspectRatio   0

User · Answer

You can also set the dimensions to the canvas   lt canvas id  myChart  width  400  height  400  gt  lt  canvas gt    And then set the responsive options to false to always maintain the chart at the size specified   options        responsive  false

User · Answer

If you disable the maintain aspect ratio in options then it uses the available height   var chart   new Chart  blabla                     type   bar                   data                                       options                        maintainAspectRatio  false

User · Answer

You can wrap your canvas element in a parent div  relatively positioned  then give that div the height you want  setting maintainAspectRatio  false in your options    HTML  lt div id  canvasWrapper  style  position  relative  height  80vh 500px whatever  gt   lt canvas id  chart  gt  lt  canvas gt   lt  div gt    lt script gt  new Chart somechart    options        responsive  true      maintainAspectRatio  false      your other options           lt  script gt

User · Answer

You should use html height attribute for the canvas element as    lt div class  chart  gt       lt canvas id  myChart  height  100  gt  lt  canvas gt   lt  div gt

User · Answer

This one worked for me   I set the height from HTML    canvas scoreLineToAll ct-chart tab-pane active height  200   canvas scoreLineTo3Months ct-chart tab-pane height  200   canvas scoreLineToYear ct-chart tab-pane height  200     Then I disabled to maintaining aspect ratio   options      responsive  true    maintainAspectRatio  false

User · Answer

Needed the chart to fill the parent element 100   rather than setting height manually  and the problem was to force parent div to always fill remaining space   After setting responsive and ratio options  check out related chartjs doc   the following css did the trick   html   lt div class  panel  gt     lt div class  chart-container  gt       lt canvas id  chart  gt  lt  canvas gt     lt  div gt   lt  div gt    scss    panel     display  flex      chart-container       position  relative      flex-grow  1      min-height  0

User · Answer

The easiest way is to create a container for the canvas and set its height    lt div style  height  300px  gt     lt canvas id  chart  gt  lt  canvas gt   lt  div gt    and set  options          responsive  true      maintainAspectRatio  false

User · Answer

Seems like var ctx       myChart    is returning a list of elements  You would need to reference the first by using ctx 0    Also height is a property  not a function   I did it this way in my code    var ctx   document getElementById  myChart    ctx height   500

[javascript] Set height of chart in Chart.js

Examples related to javascript

Examples related to jquery

Examples related to chart.js