I have a code snippet that displays a chart with dimensions of 500x500. However, I only want to show half of the chart, like 500x250. But whenever I adjust the values in the div, it resizes the entire chart instead of just showing half.
My goal is to hide the portion of the chart that is colored 'Yellow' without making it transparent. https://i.sstatic.net/URbhW.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Code Analyzer</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="js/boostrap.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Pac Man', 'Percentage'],
['Analyzer Score', 75],
['', 25],
['', 100]
]);
var options = {
pieHole: 0.5,
tooltip: {text: 'value'},
title: 'My Daily Activities',
legend: 'none',
width: 500,
pieSliceText: 'none',
pieStartAngle: 270,
slices: {
0: { color: '#3366CC' },
1: { color: '#EAE8E8'},
2: { color: 'yellow'}
}
};
var chart = new google.visualization.PieChart(document.getElementById('pacman'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div id="pacman" style="width: 500px; height: 500px;"></div>
</div>
</div>
</div>
</body>
</html>