I’ve created a chart in Chart.js that looks like this:
(Full code: https://codepen.io/LondonAppDev/pen/RwMBxPX)
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: 'Range',
data: [
{x: 'A', y: [100, 200]},
{x: 'B', y: [50, 120]}
],
backgroundColor: ['red']
}]
},
options: {
barThickness: 1,
}
});
I’m trying to style the bar so they have markers at the top and bottom like this:
I’ve looked into CSS but it won’t work as the elements are within a canvas.
I’m wondering if there is a style option that would achieve this?
>Solution :
I think there are 2 options:
- use Chart error bars plugin: https://github.com/sgratzl/chartjs-chart-error-bars
- develop own plugin to do that.
In the below snippet, you can find the options 2 (own plugin)
var plugin = {
id: 'myPlugin',
afterDraw(chart, args) {
const ctx = chart.ctx;
ctx.save();
const meta = chart.getDatasetMeta(0);
for (const data of meta.data) {
const topStart = data.x - 20;
const topEnd = data.x + 20;
ctx.lineWidth = data.options.borderWidth;
ctx.strokeStyle = data.options.backgroundColor;
ctx.beginPath();
ctx.moveTo(topStart, data.y);
ctx.lineTo(topEnd, data.y);
ctx.moveTo(topStart, data.y + data.height);
ctx.lineTo(topEnd, data.y + data.height);
ctx.closePath();
ctx.stroke();
}
ctx.restore();
}
};
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
plugins: [plugin],
data: {
datasets: [{
label: 'Range',
data: [
{x: 'A', y: [100, 200]},
{x: 'B', y: [50, 120]}
],
backgroundColor: ['red']
}]
},
options: {
barThickness: 1,
}
});.myChartDiv {
max-width: 600px;
max-height: 400px;
}<script src="https://npmcdn.com/chart.js@latest/dist/chart.min.js"></script>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>