> For the complete documentation index, see [llms.txt](https://readme.directual.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://readme.directual.com/plugins/developing-plugins/developing-web-plugins/example-using-chart.js-in-directual.md).

# Example: Using Chart.js in Directual

### Step 1: Preparing data

"Create a data structure named Population with two columns: date and value, and populate it.

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2F66MwaeSsGkZ1eHqZn0MG%2Fimage.png?alt=media\&token=92dddb47-d447-4b75-b0ae-8cf50e6a5919)

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FHmHfgOfK23JqurRnAKRP%2Fimage.png?alt=media\&token=a6165220-06ce-46a3-a7d0-0d4a10c1bcba)

2\. Create an endpoint for accessing this data structure

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FC8jhjV2wn9hoc3D1833H%2Fimage.png?alt=media\&token=cd13c47b-73f9-4900-b3c3-4f7b6facb4ff)

Now you have:

1. A data structure called Population
2. An endpoint for accessing this data structure

### Step 2: Creating plugin

Create a new plugin on the main page.

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FyqfwlzhniWzxSx9vwSyX%2Fimage.png?alt=media\&token=8462d9da-4cdc-403f-aecb-3124cdc10dea)

In the Parameters sections, set the JS library to: "<https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js>". This library will be loaded on the open page, allowing you to utilize functions from it.

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FGqv1zDc1kCOwFsJjEkVQ%2Fimage.png?alt=media\&token=1385ad6e-087b-4ebe-a9b7-bf0a37319d36)

#### Add a new component in the Web-component section

Be sure to include the following two parameters:

* 'Endpoint' with a type of 'API-endpoint' to access data from any API
* 'Title' for rendering the name of your graphic.

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FAt576uLAeQCUeWkqjomN%2Fimage.png?alt=media\&token=ebc58b90-0e98-4782-bdb8-e3fb4af13745)

Insert the code to 'initialize' section:

```
function(instance, context) {

  div = $('<canvas id="myChart"></canvas>');
  div.css('width', '100%');
  div.css('height', '100%');
  div.css('cursor', 'pointer');
  
  instance.canvas.append(div);

}
```

Then insert the code bellow to the 'Update' section:

```
function(instance, properties, context) {  var ctx = document.getElementById('myChart');
var data = context.endpoint || []
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: data.map(s=>s.date),
        datasets: [{
            label: '# of ' + context.title,
            data: data.map(s=>parseInt(s.value)),
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
}); }
```

Add your plugin to your app in the 'Status and action' section:

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2F8SVMKqAZ3USA2nfrYiSc%2Fimage.png?alt=media\&token=6c57584e-bf25-4b2d-8fcc-d96acb3254f7)

Insert your app's name in the 'Apps where the plugin is available' field. The new plugin will then be available in these apps.

### Last step: Use your plugin in your app!

Open your app, and go to the Plugins section and install it.

Move your component from the right section to your page. &#x20;

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FfggsamFmXEJh88Qi3UVP%2Fimage.png?alt=media\&token=be20eecc-bfeb-4cb4-9901-a0f8f8a64b52)&#x20;

Click on 'View page'.

Voilà!

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2F2hheo84WJ6PV9kxYFGcQ%2Fimage.png?alt=media\&token=95e25fdf-7892-422d-974f-f0c937ede41b)