Hola a todos, soy nuevo en el gráfico JS, necesito hacer barras discontinuas. Actualmente estoy usando la versión - "chart.js": "^3.7.0" ,
Necesito que mis barras se vean como esta imagen
Puede crear un tipo de gráfico personalizado extendiendo Chart.BarController como se explica aquí .
Eche un vistazo al código ejecutable a continuación y vea cómo funciona.
class DashedBorderBar extends Chart.BarController { draw() { super.draw(arguments); const ctx = this.chart.ctx; ctx.save(); const dataset = this.chart.data.datasets[0]; ctx.strokeStyle = dataset.dashedBorderColor; ctx.lineWidth = dataset.dashedBorderWidth; ctx.setLineDash(dataset.borderDash); this.getMeta().data.forEach(d => { ctx.strokeRect(dx - d.width / 2, dy, d.width, d.height + ctx.lineWidth); }); ctx.restore(); } }; DashedBorderBar.id = 'dashedBorderBar'; DashedBorderBar.defaults = DashedBorderBar.defaults; Chart.register(DashedBorderBar); new Chart('myChart', { type: 'dashedBorderBar', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'Dataset', backgroundColor: 'rgba(255, 99, 132, 0.2)', data: [65, 59, 80, 81, 56, 45, 40], dashedBorderColor: 'blue', dashedBorderWidth: 3, borderDash: [10, 5] }] } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script> <canvas id="myChart" height="120"></canvas>