<iframe 
    src="http://jsxgraph.org/share/iframe/pie-chart" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Pie chart" 
    allowfullscreen
></iframe>

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

        var dataArr = [30, 16, 14, 10, 10, 8, 6, 6];
        var board = JXG.JSXGraph.initBoard(BOARDID, { showNavigation: false, showCopyright: true, boundingbox: [-2.4, 8,
                13.6, -4], keepaspectratio: true });
        board.containerObj.style.backgroundColor = 'black';
        board.options.label.strokeColor = 'yellow';
        board.suspendUpdate();
    
        var a = board.create('chart', dataArr,
        {
            chartStyle: 'pie',
            colors: ['#0F408D', '#6F1B75', '#CA147A', '#DA2228', '#E8801B', '#FCF302', '#8DC922', '#15993C',
                '#87CCEE', '#0092CE'],
            fillOpacity: 0.8,
            center: [5, 2],
            strokeColor: 'black',
            highlightStrokeColor: 'black',
            strokeWidth: 4,
            labels: ['War games', 'Sport games', 'Old games', 'Strategy games', '3D games', 'Puzzle games',
                'Board games', 'I do not play games'],
            highlightColors: ['#E46F6A', '#F9DF82', '#F7FA7B', '#B0D990', '#69BF8E', '#BDDDE4', '#92C2DF',
                '#637CB0', '#AB91BC', '#EB8EBF'],
            highlightOnSector: true,
            highlightBySize: true,
            gradient: 'linear'
        });
        board.unsuspendUpdate();
 </script> 

<jsxgraph width="100%" aspect-ratio="1 / 1" title="Pie chart" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution ShareAlike 4.0 International License.
   https://creativecommons.org/licenses/by-sa/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
       var dataArr = [30, 16, 14, 10, 10, 8, 6, 6];
       var board = JXG.JSXGraph.initBoard(BOARDID, { showNavigation: false, showCopyright: true, boundingbox: [-2.4, 8,
               13.6, -4], keepaspectratio: true });
       board.containerObj.style.backgroundColor = 'black';
       board.options.label.strokeColor = 'yellow';
       board.suspendUpdate();
   
       var a = board.create('chart', dataArr,
       {
           chartStyle: 'pie',
           colors: ['#0F408D', '#6F1B75', '#CA147A', '#DA2228', '#E8801B', '#FCF302', '#8DC922', '#15993C',
               '#87CCEE', '#0092CE'],
           fillOpacity: 0.8,
           center: [5, 2],
           strokeColor: 'black',
           highlightStrokeColor: 'black',
           strokeWidth: 4,
           labels: ['War games', 'Sport games', 'Old games', 'Strategy games', '3D games', 'Puzzle games',
               'Board games', 'I do not play games'],
           highlightColors: ['#E46F6A', '#F9DF82', '#F7FA7B', '#B0D990', '#69BF8E', '#BDDDE4', '#92C2DF',
               '#637CB0', '#AB91BC', '#EB8EBF'],
           highlightOnSector: true,
           highlightBySize: true,
           gradient: 'linear'
       });
       board.unsuspendUpdate();
</jsxgraph>