How to align multiple charts with chart.js?

@haylee.mertz 

To align multiple charts with Chart.js, you can use CSS Flexbox or a grid system like Bootstrap to organize and position the charts within a container. Here is a step-by-step guide to align multiple charts with Chart.js:

1. Create a container div in your HTML file to hold the multiple charts:

1
2
3
4

<div class="chart-container">
  <canvas id="chart1"></canvas>
  <canvas id="chart2"></canvas>
</div>

1. Initialize the charts using Chart.js in your JavaScript file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

var ctx1 = document.getElementById('chart1').getContext('2d');
var chart1 = new Chart(ctx1, {
  type: 'bar',
  data: {
    // chart data here
  },
  options: {
    // chart options here
  }
});

var ctx2 = document.getElementById('chart2').getContext('2d');
var chart2 = new Chart(ctx2, {
  type: 'line',
  data: {
    // chart data here
  },
  options: {
    // chart options here
  }
});

1. Use CSS Flexbox to align the charts within the container:

1
2
3
4

.chart-container {
  display: flex;
  justify-content: space-between;
}

With this setup, the charts will be aligned horizontally within the container div. You can adjust the CSS properties to customize the alignment as needed. Additionally, you can use a grid system like Bootstrap to create a responsive layout for the charts.