I have a chart which needs a dashed border on the left and bottom axe and a single line border on top like in the screenshot below.
This is what I achieved so far: I used chartAreaBorder plugin to get the following example. My code for this:
const chartAreaBorder = {
id: 'chartAreaBorder',
beforeDraw(chart, args, options) {
const { ctx, chartArea: { left, top, width, height } } = chart
ctx.save()
ctx.strokeStyle = options.borderColor
ctx.lineWidth = options.borderWidth
ctx.borderStyle = options.borderDash
ctx.borderTopWidth = options.borderTopWidth
ctx.setLineDash(options.borderDash || [])
ctx.lineDashOffset = options.borderDashOffset
ctx.strokeRect(left, top, width, height)
ctx.restore()
}
}
const config = {
type: 'line',
data: data,
plugins: [ chartAreaBorder ],
options: {
plugins: {
chartAreaBorder: {
borderColor: '#b1b1b1',
borderWidth: 10,
/*borderWidth: {
top:0,
right:0,
left:10,
bottom:10
},*/
borderDash: [ 1, 5 ],
borderDashOffset: 2,
},
}
}
}
}
This is what i get:
So my problem here is, the border is applied on every site. I couldn't find any options to hide the top/right border or to set the top/right borderWidth to 0
Is there a way to set a different border for every site of my chart?
EDIT: Here is the solution for my ChartAreaBorder with the optimized code. Thanks to @LeeLenalee :)
const chartAreaBorder = {
id: 'chartAreaBorder',
afterDraw: (chart, args, opts) => {
const {
chartArea: {
top,
left,
width,
height
},
ctx
} = chart
const {
borders: {
tLtR,
tLbL,
tRbR,
bLbR
}
} = opts
ctx.save()
if ( tLtR && tLtR.borderWidth !== 0 ) {
ctx.beginPath()
ctx.strokeStyle = tLtR.borderColor || Chart.defaults.color
ctx.lineWidth = tLtR.borderWidth || 0
ctx.borderStyle = tLtR.borderDash || []
ctx.setLineDash(tLtR.borderDash || [])
ctx.lineDashOffset = tLtR.borderDashOffset || 0
ctx.moveTo(left, top + 0.5)
ctx.lineTo(left + width, top)
ctx.stroke()
}
if ( tLbL && tLbL.borderWidth !== 0 ) {
ctx.beginPath()
ctx.strokeStyle = tLbL.borderColor || Chart.defaults.color
ctx.lineWidth = tLbL.borderWidth || 0
ctx.borderStyle = tLbL.borderDash || []
ctx.setLineDash(tLbL.borderDash || [])
ctx.lineDashOffset = tLbL.borderDashOffset || 0
ctx.moveTo(left, top)
ctx.lineTo(left, top + height - 5)
ctx.stroke()
}
if ( tRbR && tRbR.borderWidth !== 0 ) {
ctx.beginPath()
ctx.strokeStyle = tRbR.borderColor || Chart.defaults.color
ctx.lineWidth = tRbR.borderWidth || 0
ctx.borderStyle = tRbR.borderDash || []
ctx.setLineDash(tLbL.borderDash || [])
ctx.lineDashOffset = tRbR.borderDashOffset || 0
ctx.moveTo(left + width, top)
ctx.lineTo(left + width, top + height)
ctx.stroke()
}
if ( bLbR && bLbR.borderWidth !== 0 ) {
ctx.beginPath()
ctx.strokeStyle = bLbR.borderColor || Chart.defaults.color
ctx.lineWidth = bLbR.borderWidth || 0
ctx.borderStyle = bLbR.borderDash || []
ctx.setLineDash(bLbR.borderDash || [])
ctx.lineDashOffset = bLbR.borderDashOffset || 0
ctx.moveTo(left, top + height)
ctx.lineTo(left + width, top + height)
ctx.stroke()
}
ctx.restore()
}
}
plugins: {
chartAreaBorder: {
borders: {
tLtR: {
borderWidth: 1,
borderColor: '#b1b1b1'
},
tLbL: {
borderDash: [ 1, 5 ],
borderWidth: 10,
borderColor: '#b1b1b1'
},
tRbR: {
borderWidth: 0
},
bLbR: {
borderDash: [ 1, 5 ],
borderWidth: 10,
borderColor: '#b1b1b1'
},
}
}
}
