Power bi visuals embed using API in external site

Hi pbidaxlearner ,

To retrieve data from a Power BI semantic model using an API,

Register an Azure AD App and configure it as a service principal then assign it the necessary read permissions.

Use Microsoft Entra ID for authentication.
List available semantic model using

GET https://api.fabric.microsoft.com/v1/workspaces/{workspaceId}/semanticModels

(Requires viewer access to the workspace also ensure the service principal has ruild or read permissions on the semantic model)

Once you've extracted data from the Power BI semantic model , convert it into a format your charting library understands—usually JSON 
Eg- JSON 

[
  { "label": "Sales", "value": 120 },
  { "label": "Marketing", "value": 80 },
  { "label": "Development", "value": 150 }
]

 Choose your charting library-

<canvas id="myChart"></canvas>
https://cdn.jsdelivr.net/npm/chart.js
<script>
  const data = [
    { label: "Sales", value: 120 },
    { label: "Marketing", value: 80 },
    { label: "Development", value: 150 }
  ];

  const ctx = document.getElementById('myChart').getContext('2d');
  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: data.map(d => d.label),
      datasets: [{
        label: 'Department Budget',
        data: data.map(d => d.value),
        backgroundColor: 'rgba(75, 192, 192, 0.6)'
      }]
    }
  });
</script>

Refer- Chart.js Samples | Chart.js
Plotly Python Graphing Library

Then you can embed this in your external webpage.

Hope this helps!