# Work in Progress: How to add Chart.js to your flow

Here’s a quick guide and one way on how to add chart.js

We will need to do 3 key steps:

* Create a chart container.
* Create a Data Output (you can also do it with a computed field)
* Trigger the Data Output on page load.

1. Create a chart container, leave it empty and remember the key (in this case is going to be “chart\_container”.)
2. Add your chart.js code inside your Data Output. You can use this one as a template, but we suggest you read the Chart.js documentation for more customization here<https://www.chartjs.org/docs/latest/>

```jsx
function output(userData, context) {
  setTimeout(() => {
    // Savvy setup for displaying the chart
    const chartEl = document.createElement("div");
    chartEl.innerHTML = '<canvas id="myChart"></canvas>';
    document.querySelector(".ComponentKey-chart_container").appendChild(chartEl);
    const scriptEl = document.createElement("script");
    scriptEl.src = "<https://cdn.jsdelivr.net/npm/chart.js>";
    scriptEl.onload = loadChart;
    document.body.appendChild(scriptEl);

		//Chart.js setup (read the docs!)
    const labels = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];
    const data = {
      labels: labels,
      datasets: [
        {
          label: "# of Votes",
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1,
        },
      ],
    };
    const config = {
      type: "bar",
      data: data,
      options: {
        scales: {
          y: {
            beginAtZero: true,
          },
        },
      },
    };
    function loadChart() {
      const myChart = new Chart(document.getElementById("myChart"), config);
    }
  }, 500);
}

```

1. Once you created your container and created your data output with your chart.js code inside, you’ll need to trigger it on page load, in the page you need or before, not after.
2. Select the page you want to execute, go to triggers, and select the data output you want to execute on page load
3. Done! You will see your chart displayed inside your “chart\_container” on your flow.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.trysavvy.com/other-useful-docs/work-in-progress/pending/work-in-progress-how-to-add-chart.js-to-your-flow.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.