Here’s the translated version suitable for posting on Stack Overflow:
Title: Customizing Chart.js in Angular with PrimeNG to achieve a specific design
I’m using Angular with PrimeNG’s implementation of Chart.js to visualize data. Currently, I have achieved the complete requirements as shown in Figure 1 (attached). However, the client desires an effect like Figure 2 (attached). Is it possible to customize the chart to achieve this design?
I’m wondering if anyone has experience in this area and could provide some guidance. Any help would be greatly appreciated. Thank you!
[Include Figure 1 and Figure 2 images in the post]
Tags: angular, primeng, chart.js, data-visualization, customization
Additional tips:

Make sure to include all relevant code snippets, preferably in a minimal reproducible example.
Provide clear descriptions of what you’ve tried so far and where you’re stuck.
Be responsive to comments and answers, and provide additional information if requested.
If you find a solution, consider posting an answer to your own question to help future readers.

Let me know if you have any further questions or if you need assistance with anything elseenter image description here

Here is the structure of my code:

HTML

<p-panel>
  <div class="card">
    <div class="grid p-fluid">

      <!-- 半環型圖 -->
      <div class="col-12 md:col-6 lg:col-4">
        <p-chart type="doughnut" [data]="semicircleData" [options]="semicircleOptions"></p-chart>
       </div>

    </div>
  </div>
</p-panel>

TS

import { Component, OnInit } from '@angular/core';
import { chartDataService } from './service/chartjs-demo.service';
import { ChartOptions} from 'chart.js';
import {ChartData } from './models/chartjs-model';


const sharedOptions: Partial<ChartOptions> = {
  responsive: true,
  plugins: {
    legend: {
      display: true 
    },
    title: {
      display: true,
      text: ''
    }
  }
};


@Component({
  selector: 'app-chartjs-demo',
  templateUrl: './chartjs-demo.component.html',
  styleUrls: ['./chartjs-demo.component.scss']
})


export class ChartjsDemoComponent implements OnInit {


  // 半環形圖
  semicircleData!: ChartData;

  
  //半環圓圖
  semicircleOptions: any = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
        display:true,
      },
      tooltip: {
        enabled: true
      }
    },
    circumference: 180,
    rotation: 270,
    // 調整 legend 間距用
    layout: {
       padding:{
        top:100
       }
     },
     scales:{
      x: {
        type: 'linear',
        display: true,
        position: 'left',
        beginAtZero: true
    },
      x1: {
          type: 'linear',
          display: true,
          position: 'right',
          ticks: {
          },
          grid: {
              drawOnChartArea: false,
          }
      }
    }
  }
  

  // 注入 chartDataService 服務
  constructor(private chartDataService: chartDataService) { }

  ngOnInit() {

    //半環形圖(chart-half-doughnut.json)
    this.chartDataService.getChartData('chartjg_semicircle').subscribe(data => {
      this.semicircleData = data;
    });

  }
}

source JSON:

[
  {
      "title": "Target-Opportunity Count",
      "label": "OT#",
      "data": "1",
      "percentage": "0.01%",
      "target": "10000"
  },
  {
      "title": "Target-Conversion Rate",
      "label": "Conversion Rate (QQ to SO)",
      "data": "50%",
      "percentage": "50%",
      "target": "100"
  }
]