pie-with-image.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pie with Image</title>


    <link href="../../assets/styles.css" rel="stylesheet" />

    <style>
        #chart {

            max-width: 380px;
            margin: 35px auto;
        }
    </style>
</head>

<body>
    <div id="chart">

    </div>


    <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>

    <script>
        var options = {
            chart: {
                width: 380,
                type: 'pie',
            },
            colors: ['#93C3EE', '#E5C6A0', '#669DB5', '#94A74A'],
            series: [44, 33, 54, 45],
            fill: {
                type: 'image',
                opacity: 0.85,
                image: {
                     src: ['../../assets/images/stripes.jpg', '../../assets/images/1101098.png', '../../assets/images/4679113782_ca13e2e6c0_z.jpg', '../../assets/images/2979121308_59539a3898_z.jpg'],
                    width: 25,
                    imagedHeight: 25
                },
            },
            stroke: {
                width: 4
            },
            dataLabels: {
                enabled: false
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        width: 200
                    },
                    legend: {
                        position: 'bottom'
                    }
                }
            }]
        }

        var chart = new ApexCharts(
            document.querySelector("#chart"),
            options
        );