Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67527

How to add image inside the every slice of doughnut chart using Chart.js?

$
0
0

I have draw a doughnut chart using Chart.js https://www.chartjs.org/docs/latest/charts/doughnut.html and i want to add image (i.e .png .svg) inside of every slice of doughnut chart as well as gradient background color. this goal i want to achieve...image link here

html code here....

<canvas id="myChart" width="600" height="400"></canvas>

js code here

              var ctx = $('#myChart');
              var myChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['Instagram: 35% ($38.21, 100 items)',
                    'Pinterest: 20% ($23.98, 69 items)',
                    'Direct: 15% ($17.77, 48 items)',
                    'Facebook: 12% ($13.54, 41 items)',
                    'Twitter: 10% ($11.02, 35 items)',
                    'youtube: 8% ($9.63, 21 items)'],
                    datasets: [{
                        data: [35, 20, 15, 12, 10, 8],
                        backgroundColor: [
                        '#ff0',
                        '#BD081C',
                        '#232323',
                        '#1877F2',
                        '#1DA1F2',
                        '#FF0000'
                        ]
                    }]
                },
                options: {   
                    rotation:-0.2 * Math.PI, 
                    responsive: false,
                    scales: {
                        Axes: [{
                            gridLines: {
                                drawBorder: false,
                            },
                        }]
                    },
                    legend: {
                        display: true,
                        position: "right",
                        align: "center",
                        onClick: null,
                        fontSize: 30,
                        fullWidth:true,
                        labels: {
                            fontColor: '#000',
                            fontSize:16,
                            padding:30,
                        }
                    },
                }
              });

Viewing all articles
Browse latest Browse all 67527

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>