> 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.

![](/files/LTeRJdeHyQbjc4MSrvAV)

![](/files/rpoMw6jSyzZb6keDQPtb)

2\. Create an endpoint for accessing this data structure

![](/files/AK0MfIQaOyomQlrCHhul)

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.

![](/files/qzeRQqndcRXAzv9Md1qe)

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.

![](/files/oYqcvGpoKI71ykcByRTB)

#### 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.

![](/files/JEOmvdvbZcrwBFSOZHKk)

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:

![](/files/LtKnEPfKcS3g7ddee2Ja)

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;

![](/files/CrNOjvGXjOBk709VKENt)&#x20;

Click on 'View page'.

Voilà!

![](/files/zsqtX6Wi4CFhvoX0bdSB)