Chart.js: Problems with the "height" of the "canvas"

Hi guys! I have problems with the height of the Canvas. Below is a picture of my problem. default

code: <div class="chart"> <canvas id="wgratingChart" style="border: 1px solid #0F0; height: 70px;"></canvas> </div>

style: .chart { position: relative; overflow: hidden; width: 100%;

.chart canvas { width: 100%!important;

`var ctx = document.getElementById(“wgratingChart”).getContext(“2d”);

                var wgrChartData = 
                {
                    type: 'line',                                       
                    data: 
                    {
                        labels: ["", "", "", "", "", ""],
                        datasets: 
                        [
                            {
                                data: [1, 2, 4, 2, 3, 5],                               
                                label: "Рейтинг WG",
                                fill: true,
                                lineTension: 0,

                                backgroundColor: '#2A2D35',

                                borderWidth: 3,
                                borderColor: "rgba(255, 255, 255, 1)",                                  


                                pointRadius: 2,
                                pointBorderWidth: 1,
                                pointBorderColor: "rgba(75,192,192,1)",                             

                                pointHoverRadius: 3,
                                pointHoverBorderWidth: 1,
                                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                                pointHoverBorderColor: "rgba(220,220,220,1)",

                                pointHitRadius: 3,
                            }
                        ]                           
                    },
                    options: 
                    {
                        responsive: true,
                        maintainAspectRatio: false,
                        legend:
                        {                               
                            display: false
                        },
                        scales:
                        {
                            xAxes:
                            [
                                {
                                    display: false
                                }
                            ],
                            yAxes:
                            [
                                {
                                    display: true,
                                    ticks:
                                    {

                                    }                                       
                                }                                   
                            ]                               
                        }
                    }
                };

                var wgrChart = new Chart(ctx, wgrChartData);`

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 15 (7 by maintainers)

Most upvoted comments

@zdebskiy I copied your code into a fiddle and it seemed to work: https://jsfiddle.net/royddLw8/

etimberg on Jul 5, 2016

@zdebskiy try setting height: 70px on the containing div

etimberg on Jul 4, 2016

@zdebskiy you can change many different colors for the axes

options: {
  scales: {
    yAxes: [{
      gridLines: {
        color: 'red', // makes grid lines for this axis red
      },
      scaleLabel: {
        fontColor: 'green', // makes the title of the axis green
      }
      ticks: {
        fontColor: 'blue', // makes the individual tick mark strings blue
      }
    }]
  }
}

etimberg on Jul 4, 2016