chart.js IMG example

by Imri Paloja

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<div class="container">
  <canvas id="myChart" width="400" height="400"></canvas>
</div>

CSS

canvas#myChart {
  box-shadow: 2px 2px 2px #454545;  
}

div.container {
  margin-top: 25px;
  
}

JavaScript

//const ctx = document.getElementById('myChart');
/* const ctx = document.getElementById('myChart').getContext('2d');
const ctx = $('#myChart');
const ctx = 'myChart'; */
const img = new Image();
img.src = 'https://eurobytes.nl/favicon.png';
img.onload = function() {
    const ctx = document.getElementById('myChart').getContext('2d');
    const fillPattern = ctx.createPattern(img, 'repeat');

    const chart = new Chart(ctx, {
        data: {
            labels: ['Item 1', 'Item 2', 'Item 3'],
            datasets: [{
                data: [10, 20, 30],
                backgroundColor: fillPattern
            }]
        }
    });
};