Displaying charts with Chart.js

Chart.js is a popular, open-source JavaScript library that allows you to create beautiful, interactive, and responsive charts. When integrated into Power Pages (formerly Power Apps Portals), it provides a powerful way to visualize Dataverse data using charts like bar graphs, pie charts, line charts, and more.

---

Use Cases in Power Pages

• Visualize revenue trends from Dataverse
• Show ticket resolution rates for customer support
• Display job application counts by status
• Provide data summaries in admin dashboards

---

Step-by-Step Integration

1. Include Chart.js in Your Power Page

You can add the Chart.js library in your Power Pages by editing the Web Template or inserting a <script> tag into the page:

htmlCopyEdit<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Add this inside your Web Template or Page Copy (in Source view).

---

2. Prepare a Canvas Element for the Chart

Add a canvas element where the chart will be rendered:

<canvas id="myChart" width="400" height="200"></canvas>

---

3. Fetch Data from Dataverse (Using Liquid or Web API)

You can retrieve data using Liquid (for server-side rendering) or via Dataverse Web API + JavaScript (for dynamic client-side charts).

Liquid example (static data):

{% assign accounts = entities.account | where: "statecode", 0 %}
<script>
  const labels = [
    {% for account in accounts %}
      "{{ account.name }}",
    {% endfor %}
  ];

  const dataValues = [
    {% for account in accounts %}
      {{ account.revenue }},
    {% endfor %}
  ];
</script>

---

4. Render the Chart Using Chart.js

Add this JavaScript snippet after defining the data arrays:

<script>
  const ctx = document.getElementById('myChart').getContext('2d');
  const myChart = new Chart(ctx, {
    type: 'bar', // change to 'pie', 'line', 'doughnut', etc.
    data: {
      labels: labels,
      datasets: [{
        label: 'Revenue',
        data: dataValues,
        backgroundColor: 'rgba(54, 162, 235, 0.6)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

---

Tips

• Use Entity Permissions to expose data securely for JavaScript.
• Fetch real-time data using Web API and AJAX calls for dynamic charts.
• Store Chart.js logic in Web Files to keep your page cleaner and modular.
• For better control, you can use custom JavaScript files to manage larger dashboards.

---

Chart Types Supported

• line
• bar
• pie
• doughnut
• radar
• polarArea
• bubble
• scatter

---

Security Considerations

• Ensure entity permissions are configured properly.
• Do not expose sensitive data in JavaScript without validation or authorization.
• Prefer using Liquid when only server-side rendering is required.

---

Bonus: External Data with FetchXML + Power Automate

For advanced scenarios, trigger a Power Automate flow to query data via FetchXML and return it via a custom Web API, then render it using Chart.js.