JavaScript
var ctx1 = document.getElementById('myChart1').getContext('2d');
var chart1 = new Chart(ctx1, {
type: 'bar',
data: {
labels: ['January','February','March'],
datasets: [{
label: "First Months",
data: [1,5,3],
backgroundColor: 'rgb(34, 99, 132)',
},
{
label: "Second Months",
data: [4,2,1],
backgroundColor: 'rgb(134, 99, 132)',
}]
},
options: {
title: {
display: true,
text: 'Alignment: Top Left'
},
legend: {
position: 'top',
alignment: 'left'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
}
}
});
var ctx2 = document.getElementById('myChart2').getContext('2d');
var chart2 = new Chart(ctx2, {
type: 'bar',
data: {
labels: ['January','February','March'],
datasets: [{
label: "First Months",
data: [1,5,3],
backgroundColor: 'rgb(34, 99, 132)',
},
{
label: "Second Months",
data: [4,2,1],
backgroundColor: 'rgb(134, 99, 132)',
}]
},
options: {
title: {
display: true,
text: 'Alignment: Top Right'
},
legend: {
position: 'top',
alignment: 'right'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
}
}
});
var ctx3 = document.getElementById('myChart3').getContext('2d');
var chart3 = new Chart(ctx3, {
type: 'bar',
data: {
labels: ['January','February','March'],
datasets: [{
label: "First Months",
data: [1,5,3],
backgroundColor: 'rgb(34, 99, 132)',
},
{
label: "Second Months",
data: [4,2,1],
backgroundColor: 'rgb(134, 99, 132)',
}]
},
options: {
title: {
display: true,
text: 'Alignment: Left Bottom'
},
legend: {
position: 'left',
alignment: 'bottom'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
}
}
});
var ctx4 =...