I am using chartJS to draw a bubble chart with an x axis running from -5 to +5 and a y axis running from -5 to +5. I was able to change the grid line styling using
x: {
grid: {
borderDash: [2, 10],
lineWidth: 1,
color: `#000`,
},
to get this result.
I need to have the X and Y axis at 0 on both to be solid bold. Is there a way to style gridline at specific tick points?
desired result is this…
Advertisement
Answer
The borderDash option is non scriptable so to achieve this behaviour you will need to use a custom plugin to draw over the default grid lines:
const zeroZeroLines = {
id: 'zeroZeroLines',
beforeDatasetsDraw: (chart, args, opts) => {
const {
ctx,
chartArea: {
top,
bottom,
left,
right
},
scales: {
x,
y
}
} = chart;
const color = opts.color || 'black';
const width = opts.width || 1;
ctx.beginPath();
ctx.lineWidth = width;
ctx.strokeStyle = color;
ctx.moveTo(x.getPixelForValue(0), bottom);
ctx.lineTo(x.getPixelForValue(0), top);
ctx.moveTo(left, y.getPixelForValue(0));
ctx.lineTo(right, y.getPixelForValue(0));
ctx.stroke();
}
}
const options = {
type: 'bubble',
data: {
datasets: [{
label: '# of Votes',
data: [{
x: -4,
y: 0,
r: 4
}, {
x: 1,
y: -3,
r: 10
}, {
x: 3,
y: 3,
r: 20
}, {
x: 0,
y: 0,
r: 20
}],
backgroundColor: 'pink'
}]
},
options: {
scales: {
x: {
min: -5,
max: 5,
grid: {
borderDash: [2, 2]
}
},
y: {
min: -5,
max: 5,
grid: {
borderDash: [2, 2]
}
}
},
plugins: {
zeroZeroLines: {
color: 'black',
width: 1
}
}
},
plugins: [zeroZeroLines]
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script> </body>