samples/percentage_position.html

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/chart.js@4.1.2/dist/chart.umd.min.js"></script>
        <script src="../chartjs-plugin-watermark.js"></script>
        <style type="text/css">
            #myChart {
                max-width: 600px;
                max-height: 400px;
            }
        </style>
    </head>
    <body>
        <div class="myChartDiv">
            <canvas id="myChart" width="600" height="400"></canvas>
        </div>
        <script type="text/javascript">
            var ctx = document.getElementById("myChart");

            var image = new Image();
            image.src = "https://placekitten.com/200/300";

            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [{
                        label: '# of Votes',
                        data: [12, 19, 3, 5, 2, 3],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    watermark: {
                        image: image,
                        
                        x: "50%",
                        y: "25%",
                    }
                }
            });
        </script>
    </body>
</html>