Custom JavaScript chart component not rendering in analytics dashboard

We built a custom chart visualization using JavaScript (Chart.js library) as an HTML web resource for our analytics dashboard. The chart displays sales trends with custom calculations. It works perfectly when testing the web resource URL directly in browser, but fails to render when embedded in the system dashboard.

The dashboard shows a blank space where the chart should appear. Browser console shows no JavaScript errors. We’ve verified the web resource is published and included in our managed solution. The HTML web resource references Chart.js library from CDN and our custom rendering script.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="salesChart"></canvas>
<script src="../WebResources/new_chartrenderer.js"></script>

Other standard charts on the same dashboard display correctly. Only our custom web resource component fails to render. Are there specific requirements for web resource dependencies in dashboard contexts for D365 9.0?

Your chart component failure involves three interconnected issues that must be resolved together for dashboard rendering to work properly.

Web Resource Dependencies Configuration: The fundamental problem is how D365 dashboards load web resources. Unlike form scripts that load in sequence with defined dependencies, dashboard web resources load asynchronously in isolated contexts. Your HTML web resource has an implicit dependency on Chart.js, but D365 doesn’t know about this relationship because you’re loading from an external CDN.

First, download Chart.js library and create a new JavaScript web resource:

  1. Navigate to Settings > Customizations > Customize the System
  2. Create new Web Resource: new_chartjs.js
  3. Upload the Chart.js library file (chart.min.js)
  4. Publish the web resource

Then update your HTML web resource to reference the internal library:

<script src="../WebResources/new_chartjs.js"></script>
<canvas id="salesChart"></canvas>
<script src="../WebResources/new_chartrenderer.js"></script>

Critically, you must declare this dependency explicitly. Open your HTML web resource properties, go to the Dependencies tab, and add new_chartjs.js as a required dependency. This ensures D365 loads Chart.js before your HTML web resource initializes.

Managed Solution Import Requirements: Your managed solution likely imported the HTML web resource but failed to properly include or link the Chart.js dependency. This is a common issue with managed solutions containing complex web resource hierarchies.

When exporting your solution:

  1. Ensure ALL web resources are explicitly added to the solution (new_chartjs.js, new_chartrenderer.js, and your HTML resource)
  2. Verify dependencies are configured BEFORE export - solution export captures dependency metadata
  3. Check solution XML after export to confirm dependency tags are present

If you’ve already imported a managed solution without proper dependencies, you have two options:

  • Export a new version with corrected dependencies and upgrade the managed solution
  • Create an unmanaged solution with the missing dependencies (less ideal but works as a patch)

Managed solutions in D365 9.0 have a known issue where web resource dependencies sometimes get stripped during export if the total solution size exceeds certain thresholds. If your Chart.js file is large (>500KB), consider using the minified version or splitting into multiple smaller web resources.

Dashboard Script Support Limitations: Dashboards in D365 9.0 execute web resources in a restricted security context with several critical limitations:

  1. No Parent Context Access: Your script cannot access parent.Xrm or window.top - the iframe is completely sandboxed
  2. Limited API Surface: Only basic JavaScript APIs work; Xrm.WebApi calls will fail unless you use a workaround
  3. CSP Restrictions: External resource loading (CDNs) is blocked by Content Security Policy

For data retrieval in dashboard charts, you must use alternative approaches:

// Instead of Xrm.WebApi in dashboard context
function fetchChartData() {
  // Use XMLHttpRequest with relative URLs
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/api/data/v9.0/accounts?$select=revenue");
  xhr.setRequestHeader("OData-MaxVersion", "4.0");
  xhr.setRequestHeader("OData-Version", "4.0");
  xhr.setRequestHeader("Accept", "application/json");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var data = JSON.parse(xhr.responseText);
      renderChart(data.value);
    }
  };
  xhr.send();
}

Also ensure your chart initialization waits for DOM ready state:

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", initializeChart);
} else {
  initializeChart();
}

After making these changes - uploading Chart.js as a web resource, configuring dependencies, and updating your managed solution - clear browser cache completely and refresh the dashboard. The chart should render consistently. If it still fails, use browser developer tools to check the Network tab for any 404 errors on web resource requests, which would indicate the dependency chain is still broken.


This draft is based on general Microsoft Dynamics 365 Sales knowledge. It has not been verified against your specific version and environment. Practitioners: verify the steps and share your experience below.

Dashboards have Content Security Policy restrictions that block external CDN resources. Your Chart.js library loaded from cdn.jsdelivr.net is probably being blocked. You need to upload Chart.js as a separate web resource in D365 and reference it locally instead of from external CDN.

The issue is definitely CSP-related but there’s more to it. When web resources are embedded in dashboards, they run in a sandboxed iframe with restricted permissions. External script loading is blocked by default. You need to package all dependencies as web resources. Also check if your managed solution import actually included the Chart.js library - sometimes large JavaScript libraries get excluded during solution export if not properly configured as dependencies.

Check your web resource configuration in the solution. HTML web resources need explicit dependency declarations for any JavaScript libraries they use. Open your HTML web resource properties and add Chart.js web resource to the dependencies list. Without this, the dashboard might load your HTML before the required library is available.

Dashboard script support in D365 9.0 has limitations. Not all JavaScript APIs work in dashboard context. If your chart renderer uses Xrm.WebApi or other context-dependent APIs, they might not be available when the web resource loads in the dashboard iframe. Try adding error handling and logging to see what’s actually failing at runtime.

I’ve debugged similar issues with custom dashboard components. The problem is usually a combination of CSP blocking external resources and incorrect web resource dependency chain. Also, managed solutions sometimes don’t properly import HTML web resources with complex dependency graphs. Try recreating in an unmanaged solution first to verify it’s not a solution packaging issue.