---
title: "Using the D3.js Library with Power Dashboard Reports and Gadgets"
canonical: "https://support.appfire.com/space/PSJ/15484874/Using%20the%20D3.js%20Library%20with%20Power%20Dashboard%20Reports%20and%20Gadgets"
format: markdown
---
> Macro (aura-html)


How to add the D3.js library to Power Dashboard Reports and Gadgets. In this example, we will be following this [line chart example](https://developers.google.com/chart/interactive/docs/gallery/linechart) from Google.

## Instructions

1. Copy the body html from the Google line chart example, add it to a file in the “silprograms” file that ends with “.tpl”. Add “html” tags as pictured below.
  
2. Create a new SIL Reporting Gadget, select the .tpl file you just created.
  
3. Add the JavaScript from the Google line chart example
  
4. Add the following at the end of the JavaScript so that it loads the D3.js library.
  
5. Toggle on the “Use custom javascript file?” and select the javascript file created in the previous step.

> ⚠️ Make sure that the script created in step 1 ends in .tpl, or the chart will not render properly

After clicking on the “Save” button, the chart should look like this:

![image](media://21554c4f-58c1-4aa5-be30-0179d8ade70e)

## Additional Help

Need help implementing this script? Talk to me directly to me by clicking on the bot on bottom of our [appfire.com](http://appfire.com) page.

## Related articles



> Macro (contentbylabel)

> Macro (details)
> 
> | Related issues |  |
> | --- | --- |