I am facing an issue with resizing a circle diagram from Chart.js inside a small WebView. The Width and Height of the WebView are set to 25dp, but the circle diagram does not resize properly to fit this size.
Here is the HTML code for the circle chart:
<!doctype html>
<html>
<head>
<script src="chart.min.js"></script>
<style>
html, body
{
height: 100%;
}
</style>
</head>
<body>
<canvas id="myChart" style="width:100%; height:80%;"></canvas>
<script>
var chartData = [
dataprotein,
datafat,
datacarb
];
var data = {
datasets: [{
borderWidth: 0,
data: chartData,
backgroundColor: [
'#FF604E',
'#4666FF',
'#47CC6F',
]
}],
};
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'pie',
// The data for our dataset
data: data
});
</script>
</body>