40 lines
762 B
HTML
40 lines
762 B
HTML
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
|
||
|
|
<canvas id="myChart" width="400" height="400"></canvas>
|
||
|
|
<script>
|
||
|
|
var ctx = document.getElementById('myChart').getContext('2d');
|
||
|
|
const data = {
|
||
|
|
labels: ['January', 'February', 'April', 'March', 'June', 'July'],
|
||
|
|
datasets: [
|
||
|
|
{
|
||
|
|
label: 'Dataset 1',
|
||
|
|
data: [1,2,3,4,5,6],
|
||
|
|
},
|
||
|
|
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
const config = {
|
||
|
|
type: 'bar',
|
||
|
|
data: data,
|
||
|
|
options: {
|
||
|
|
indexAxis: 'y',
|
||
|
|
elements: {
|
||
|
|
bar: {
|
||
|
|
borderWidth: 2,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
position: 'right',
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
display: true,
|
||
|
|
text: 'Chart.js Horizontal Bar Chart'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
var myChart = new Chart(ctx, config);
|
||
|
|
</script>
|