Hello Everyone I am new to chart JS , I need to make bars dashed . I am currenlty using version - "chart.js": "^3.7.0" ,
I need my bars look like This Image
You can create a custom chart type by extending Chart.BarController as explained here.
Please take a look at below runnable code and see how it works.
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(d.x - d.width / 2, d.y, 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>