How to displaying canvas in the same line
What I am trying to do here is to display several canvases in the same line. I have tried to display inline but it’s not working. It still displays one per line.
this is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>chartjs-plugin-datasource sample</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Indie+Flower">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.14.3/dist/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource"></script>
<script src="MonthlyCost.js"></script>
<script src="Budget.js"></script>
<div style="width:500px;height:500px">
<canvas id="MonthlyCost"></canvas>
</div>
<div style="width:500px;height:500px">
<canvas id="Budget"></canvas>
</div>
</body>
</html>
