Problems :

• I have the border left who add an triangle border left and right
• And i have the natif problem of responsive legend size, i want to add css on segment but not on legend of this segment.

** what i have : **
enter image description here

** what i want : (this is a figma) **
enter image description here

My Code :

 // initialisation des options de l'objet chart
  initializeOptions() {

    this.value = this.data[0]?.value || 0;

    this.CIRCLE_OF_DOUGHNUT = '95%';
    // largeur par defaut
    const borderWidths = this.data.map(() => 0); 
    // largeur du 1er element (le plus grand)
    borderWidths[0] = 10; 
    // je map a chaque fois le tableau d'objet
    this.DATAS = {
      labels: this.data.map(graph => GraphMapping[graph?.category || ""]),
      datasets: [
        {
        label: this.data.map(graph => GraphMapping[graph?.category || ""]),
        data: this.data.map(graph =>  (graph?.value || 0)),
        backgroundColor: this.LIST_COLORS_VALUES,
        borderColor: this.LIST_COLORS_VALUES[0],
        borderWidth: borderWidths,
        borderAlign: 'outside',
        spacing: 8    
      }
    ]
    }

    // les options d'affichage du graph
    this.GRAPH_OPTIONS = {
      // responsive : false,
      cutout: this.CIRCLE_OF_DOUGHNUT,
      animation:false,
      plugins: {
        title: {
          display: true,
          text: this.titleLabel,
          font: {
            size:18,
          }
        },
        legend: {
          onClick: (e:any) => {
            // Ne rien faire lorsque l'utilisateur clique sur une légende
            e.native.stopPropagation();
          },
          position: 'bottom',
          labels: {
            
            color: 'black',
            font: {
              size: 15,
              family: 'Arial',
              weight: 400
            },
            usePointStyle: true,
            pointStyleWidth: 20,
            pointStyleHeight : 20,
             
          },
          display: true,
        },
        tooltip: {
          enabled:false,
        }
      },
    };
  }


  // fonction utilisant l'objet chart 
  renderChart() {
    const chart = new Chart(this.idSelector, {
      type: 'doughnut',
      data: this.DATAS,
      options: {
        ...this.GRAPH_OPTIONS,
        onHover: (event : any, elements : any[]) => {
          if (elements.length) {
            const element = elements[0];
            this.value = this.data[element.index].value as number; 
            chart.data.datasets[0].label = this.data[element.index].category;
          }
          
        },
        onClick: (event: any, elements : any[]) => {
          if (elements.length) {
            const element = elements[0];
            const index = element.index;
            this.value = this.data[index].value as number;
            this.lastClickedValue = this.value;
            this.isSegmentClicked = true; 
            // Réinitialiser toutes les bordures à 1
            (chart.data.datasets[0].borderWidth as number[]).fill(0);
            // Augmenter la largeur de la bordure du segment cliqué
            (chart.data.datasets[0].borderWidth as number[])[index] = 10;
            chart.data.datasets[0].borderColor = this.LIST_COLORS_VALUES[index];
            chart.update();
          }
        }
      },
      plugins : [{
        id: 'mouseleave',
        afterEvent: (chart, args, element:any[]) => {
          if (args.event.type === 'mouseout' ) {
            if(!this.isSegmentClicked) this.value = this.data[0]?.value || 0;
            else this.value = this.lastClickedValue;
          }
        }
      }]
      
    });
  }

I tried for the css segment :

• I have tried to add code in plugins like what i did on ‘mouseleave’ but it doesn’t work
• And i have trie border : {top: xx, bottom: yy …}
• I have trie to disable borderRadius like what i did to add border for a segment on the onClick

I tried for the legend :

• use a borderwidth : 0 …