ui2022/chart--donut.html.twig line 1

Open in your IDE?
  1. {% set html_id = 'chart-%s'|format(token()) %}
  2. {% set dataset = _args.dataset %}
  3. {% set legend = _args.legend %}
  4. {% set label = _args.label|default('Total') %}
  6. <div class="dashboard__donutchart">
  7.     <div class="chart__donut chart-container" style="width:210px; height:210px; max-width:100%;">
  8.         <canvas id="{{ html_id }}"></canvas>
  9.     </div>
  10.     <div class="chart__overlay">
  11.         <span class="h1 mb-0 text-medium">{{- dataset|array_values|array_sum|number_format -}}</span>
  12.         <span class="font-14 text-semibold">{{ label }}</span>
  13.     </div>
  14. </div>
  15. <script type="text/javascript">
  16.     (function (window, document, $, undefined) {
  17.         $(function () {
  18.             var ctx = document.getElementById('{{ html_id }}').getContext('2d');
  19.             var cht = new Chart(ctx, {
  20.                 type: 'doughnut',
  21.                 data: {
  22.                     datasets: [{
  23.                         data: {{ dataset|array_values|json_encode|raw }},
  24.                         backgroundColor: {{ legend|map(l => l.color)|array_values|json_encode|raw }}
  25.                     }],
  26.                     labels: {{ legend|map(l => l.label)|array_values|json_encode|raw }}
  27.                 },
  28.                 options: {
  29.                     animation: false,
  30.                     responsive: true,
  31.                     rotation: 0,
  32.                     cutout: '65%',
  33.                     plugins: {
  34.                         legend: {
  35.                             display: false,
  36.                             reverse: true
  37.                         },
  38.                     }
  39.                 }
  40.             });
  41.         });
  42.     })(window, document, jQuery);
  43. </script>