https://kotlinlang.org logo
l

Lars Erik Rojeras

08/19/2020, 8:58 AM
I have another layout question (which could be related to the one above). I show a chart.js line chart, and want to scale it to a height of 20vh.
Copy code
add(lineChart).apply {
                    height = 20.vh
                }
When I check the rendered elements it looks like
Copy code
<div style="height: 20vh;">
    <div>
        <div class="chartjs-size-monitor">
            <div class="chartjs-size-monitor-expand">
                <div class=""></div>
            </div>
            <div class="chartjs-size-monitor-shrink">
                <div class=""></div>
            </div>
        </div>
        <canvas width="1125" height="562" class="chartjs-render-monitor"
                style="display: block; height: 511px; width: 1023px;"></canvas>
    </div>
</div>
The canvas height is "562", which is almost twice that of the "20vh" that I want. That means that the lower part of the chart is not visible. How can I make the chart scale both x- and y-axis and exactly fill the outer container?
2 Views