Display HTML Canvas in same line in CSS

dorsa
 
on Apr 27, 2020 09:23 AM
2624 Views

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>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download