¿Es posible hacer un intervalo de tiempo usando Chart.js? En lo que a mí respecta, usar un gráfico de barras apiladas es lo más cercano que puedo obtener, pero no exactamente lo que quiero
Lo que estoy tratando de lograr es este intervalo de tiempo
aquí está el código
const data = { labels: ['Mon', 'Tue', 'Wed' ], datasets: [{ label: 'Bars', data: [ [14, 16], [17, 22], [13, 19], ], backgroundColor: [ 'rgba(255, 26, 104, 0.2)', ], borderColor: [ 'rgba(255, 26, 104, 1)', ], borderWidth: 2, borderSkipped: false }] }; const config = { type: 'bar', data, options: { indexAxis: 'y', scales: { x: { min: 12, max: 26, ticks: { stepSize: 1, callback: (val, index) => { return `${String(val % 24).padStart(2, '0')}:00` } }, }, y: { beginAtZero: true } } } }; const myChart = new Chart( document.getElementById('myChart'), config );Puede usar horizontalBar para su tipo de barra. Ejemplo:
{ type: 'horizontalBar', data: { labels: ["a","b","c","d","e","f","g"], datasets: [{ axis: 'y', label: 'My First Dataset', data: [[5,65], [30,90], [20,80], [15,71], [20,56], [24,55], [15,70]], fill: false, backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)' ], borderColor: [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)' ], borderWidth: 1 }] }, options: { indexAxis: 'y', scales: { x: { stacked: true }, y: { stacked: true } } } }aquí el resultado
Espero poder ayudarte.