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);`

Author: Fantashit

2 thoughts on “Problems with the “height” of the “canvas”

Comments are closed.