Hi guys!
I have problems with the height of the Canvas.
Below is a picture of my problem.
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);`
@zdebskiy try setting
height: 70px
on the containing div