[Tutorial] How to implement ChartJS in Webflow

Community resources Webflow Tips
1

Hello Webflowers :webflow_heart:

I know this implementation is not very difficult thing, nor complex, but I have stumbled upon few requests lately for help with charts in Webflow, and as a continue to this post, and to @AlexMurton and @johnsherwin’s help.

ChartJS has many options, and can be pretty well costumized, so I created this base for anyone to start with.

https://webflow.com/website/ChartJS-in-Webflow

5 Likes
2

Hey @avivtech

Thanks for sharing! :webflow_heart:

1 Like
3

Incredible timing! I was literally just telling @rileyrichter I needed this a few minutes ago. Thank you for making this!

2 Likes
4

Hey @avivtech thanks a lot for sharing this! Super helpful. I can manage to get one chartjs graph to work easily, but it gets more complicated when I want to display more than one chartjs graph on a page.

The only way I managed to get more than 1 graph on the page is to add them to same embed element, see the code below:

<canvas id="chart1"></canvas>
<canvas id="chart2"></canvas>

<script>

const labels = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
];
const data = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: [0, 10, 5, 2, 20, 30, 45],
  }]
};

const config = {
  type: 'line',
  data,
  options: {}
};


  var myChart1 = new Chart(
    document.getElementById('chart1'),
    config
  );
  
    var myChart2 = new Chart(
    document.getElementById('chart2'),
    config
  );

I added the script source in the page header, via the page settings custom code, inside tag.

My problem is that if I try to have the graphs (with different id etc.) into separate embed elements, only the first chartjs graph is displayed… This is of course very limiting in terms of design/layout for the page.

Is this an issue with Webflow or am I missing something?

6

@Freddy_Smith thanks for your reply, I did check this article already and I can get this to work. But my issue is that I would like 2 of these on the same page, in separate embed elements.