```html
body {
fontfamily: Arial, sansserif;
margin: 20px;
}
h1 {
textalign: center;
}
.chartcontainer {
width: 80%;
margin: 0 auto;
}
probabilitychart {
width: 100%;
height: 400px;
}
// Data for analysis
const countries = ['France', 'Germany', 'Spain', 'Italy', 'England', 'Portugal', 'Netherlands', 'Belgium'];
const winningProbability = [0.18, 0.15, 0.12, 0.10, 0.09, 0.08, 0.07, 0.06]; // Example probabilities, should sum up to 1
// Creating the chart
const ctx = document.getElementById('probabilitychart').getContext('2d');
const probabilityChart = new Chart(ctx, {
type: 'bar',
{
labels: countries,
datasets: [{
label: 'Winning Probability',
winningProbability,
backgroundColor: [
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(153, 102, 255, 0.6)',
'rgba(255, 159, 64, 0.6)',
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Probability'
}
},
x: {
title: {
display: true,
text: 'Countries'
}
}
}
}
});