2👍
As long as you’re simply building a ‘single percentage bar’ then this is simple enough to achieve in Chart.js. Set the scale as max: 100
and min: 0
and then only draw the blue bar:
new Chart(document.getElementById('chart'), {
type: 'horizontalBar',
data: {
datasets: [{
backgroundColor: '#249DD6',
barPercentage: 1,
categoryPercentage: 1,
data: [25]
}]
},
options: {
legend: {
display: false
},
maintainAspectRatio: false,
scales: {
xAxes: [{
display: false,
ticks: {
max: 100,
min: 0
}
}],
yAxes: [{
display: false
}]
}
}
});
canvas {
background-color: #D6D7D9
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="25px"></canvas>
- [Chartjs]-How do I import chartjs as an es6 module?
- [Chartjs]-Chart.js – Line charts with different colors for each border lines
Source:stackexchange.com