Chartjs-Chartjs top 5 legend doughtnut

for futhere poeple and thnx to @user2057925 and some fiddeling got it working :
($theme_dark is a variable to change the colors from php)

        <script>
          const ass_data_dou = <?php echo json_encode(array_column($assarr, 'total_all')); ?>;
          const ass_labels_dou = <?php echo json_encode(array_column($assarr, 'name')); ?>;
          const pieGenerateLabelsLegendHandler = Chart.controllers.doughnut.overrides.plugins.legend.labels.generateLabels;
          const pieLegendClickHandler = Chart.controllers.doughnut.overrides.plugins.legend.onClick;
          let others = [];
          var theme_dark = <?php echo json_encode($theme_dark); ?>;
          let color1 = "#666666"
          let color2 = "red"
          if (theme_dark) {
            color1 = "#CCCCCC"
            color2 = "blue"
          }
          const data_custom_dou = {
            labels: ass_labels_dou,
            datasets: [{
              data: ass_data_dou,
              backgroundColor: ['#3366cc',
                                '#dc3912',
                                '#ff9900',
                                '#109618',
                                '#990099',
                                '#0099c6',
                                '#dd4477',
                                '#66aa00',
                                '#b82e2e',
                                '#316395',
                                '#994499',
                                '#22aa99']
            }],
          };
          const optionsCustom_dou = {
            plugins: {
              title: {
                display: true,
                position: "top",
                text: "legend tit",
                color: color1,
                padding: {
                  top: 5,
                  bottom: 0
                },
                font: {
                  size: 20
                }
              },
              legend: {
                position: "right",
                labels: {
                  color: color1,
                  font: {
                    size: 20
                  },
                  generateLabels(chart) {
                    const labels = pieGenerateLabelsLegendHandler(chart);
                    const sorted = labels.sort((a, b) => chart.data.datasets[0].data[a.index] <= chart.data.datasets[0].data[b.index]);
                    const top5 = sorted.filter((el, index) => index <= 5);
                    others = sorted.filter((el, index) => index > 5);
                    top5.push({text: 'Others', hidden: others[0].hidden});
                    return top5;
                  }
                },
                onClick(e, legendItem, legend) {
                  if (legendItem.text === 'Others'){
                    const ci = legend.chart;
                    others.forEach(function(item) {
                       ci.toggleDataVisibility(item.index);
                    });
                    ci.update();
                    return;
                  }
                  pieLegendClickHandler(e, legendItem, legend);
                }
              }
            }
          };
          const chart_dou = new Chart("chart_dou_distrubution", {
            type: 'doughnut',
            data: data_custom_dou,
            options: optionsCustom_dou
          });
        </script>