How to integrate Chart.js into Webflow and display the chart on a subpage?

Integrating Chart.js into Webflow and displaying the chart on a subpage can be achieved by following these steps:

Step 1: Prepare your Data
Before integrating Chart.js, you need to have your data ready in a suitable format. Chart.js accepts data in an array format, so make sure to organize your data accordingly.

Step 2: Include Chart.js Library
To integrate Chart.js into your Webflow project, you'll need to include the Chart.js library. You can do this by adding the library's CDN link to the head section of your Webflow project. Here's an example of the Chart.js CDN link:
```html

```

Step 3: Create a Container for the Chart
In Webflow, open the page where you want to display the chart. Drag and drop a div block onto the page to act as the container for your chart. Give it a unique class or ID name so that you can target it with custom code.

Step 4: Add Custom Code
After creating the container, go to the Page Settings area of your Webflow project and locate the page you're working on. Click on the "Custom Code" tab and insert the following JavaScript code within the `` tags:
```javascript
var ctx = document.getElementById('your-chart-container').getContext('2d');
new Chart(ctx, {
type: 'bar', // or any other chart type you prefer
data: {
labels: ['Label 1', 'Label 2', 'Label 3'], // Array of labels
datasets: [{
label: 'Dataset 1',
data: [10, 20, 30], // Array of data values
}]
},
options: {
// Chart configuration options
}
});
```
Make sure to replace `'your-chart-container'` with the class or ID name of the container you created in Step 3. This code initializes a new Chart.js instance and configures it according to your data and options.

Step 5: Style the Chart
Chart.js provides a wide range of options for customizing the appearance of your chart. You can modify the chart's colors, labels, tooltips, legends, and much more. Refer to the Chart.js documentation for detailed information on available options and styling possibilities.

Step 6: Preview and Publish
Once you've added the custom code and applied the necessary styles, you can preview the page within the Webflow Designer to see how the chart looks. If everything looks good, publish your Webflow project to make the chart accessible on the live site.

That's it! You've successfully integrated Chart.js into Webflow and displayed the chart on a subpage. Remember to update the chart data and options as per your requirements.