JSFiddle - React, Tailwind, and code Playground

by Anov Siradj

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<canvas width="400" height="170" id="chart"></canvas>

JavaScript

const img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Heart_pixelart_%28transparent_background%29.svg';
img.onload = function() {
    const ctx = document.getElementById('chart').getContext('2d');
    const fillPattern = ctx.createPattern(img, 'repeat');

    const chart = new Chart(ctx, {
    		type: 'bar',
        data: {
            labels: ['Item 1', 'Item 2', 'Item 3'],
            datasets: [{
                data: [90, 80, 90],
                backgroundColor: fillPattern
            }]
        }
    });
};