<div id="listeners_by_day_of_week" style="height: 250px;"></div>

<script type="text/javascript" nonce="<?=$assets->getCspNonce() ?>">
$(function () {
    $('#listeners_by_day_of_week').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: { text:'' },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        
        series: [{
            type: 'pie',
            name: <?=$this->escapeJs(__('Listeners')) ?>,
            data: <?=$day_of_week_stats ?>
        }]
    });
});
</script>