How to add Chart JS to Power Pages

We are going to have a look at how to use open-source library Chart.js. In this first blog it will focus on a simple example and the 2nd blog in the series will present something more complex.

Why use Chart.js

It's open source and has plenty of customisation options.
It's free compared to paid tools such as Power BI embeddings.
More control of the styling compared to a classic chart in Dynamics 365.

When to not use Chart.js

Exposing sensitive data as it runs client side whereas Power BI is more secure and includes row level security.
Complex charts requirements, Power BI would be a better choice for this as it has a lot more features.

Summary

Use Chart.js for lightweight, custom visualisations where you need full styling control.
Use Power BI for secure, enterprise-grade analytics, and complex dashboards.

Simple example

By the end of the example you should have the below bar chart in Power Pages by using Chart.js.

W3Schools provide a great example for us to use, so let's get started.

As this is straightforward example with not using any liquid etc, this code has been placed in a web page.

Add the CDN link to your HTML web page of your choice.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

Add the canvas element to where in the HTML you want to display the chart.

<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

Copy the below JS code to your web page JS section.

const xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
const yValues = [55, 49, 44, 24, 15];
const barColors = ["red", "green","blue","orange","brown"];

new Chart("myChart", {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [{
      backgroundColor: barColors,
      data: yValues
    }]
  },
  options: {...}
});

Sync your changes and refresh the cache on your browser and you should be able to view the chart.

Full HTML code below.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<div
  class="row sectionBlockLayout text-start"
  style="min-height: auto; padding: 8px;"
>
  <div class="container" style="display: flex; flex-wrap: wrap;">
    <div
      class="col-lg-12 columnBlockLayout"
      style="padding: 16px; margin: 60px 0px; min-height: 200px;"
    >
      <h1>Out of the box example</h1>

      <canvas id="myChart" style="width:100%;max-width:600px"></canvas>
    </div>
  </div>
</div>

Conclusion

To recap, Chart.js is a great tool and its worth looking into for straightforward charts for Power Pages. If you want build a chart by using data from Dataverse then check out part 2.

Have a great day!

👋 If you liked this then please sign up to my newsletter that will notify you once a new blog comes out.