How to use the @nivo/axes.renderGridLinesToCanvas function in @nivo/axes
To help you get started, we’ve selected a few @nivo/axes examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
plouc / nivo / packages / bar / src / BarCanvas.js View on Github 
if (theme.grid.line.strokeWidth > 0) {
this.ctx.lineWidth = theme.grid.line.strokeWidth
this.ctx.strokeStyle = theme.grid.line.stroke
enableGridX &&
renderGridLinesToCanvas(this.ctx, {
width,
height,
scale: result.xScale,
axis: 'x',
values: gridXValues,
})
enableGridY &&
renderGridLinesToCanvas(this.ctx, {
width,
height,
scale: result.yScale,
axis: 'y',
values: gridYValues,
})
}
this.ctx.strokeStyle = '#dddddd'
const legendDataForKeys = uniqBy(
result.bars
.map(bar => ({
id: bar.data.id,
label: bar.data.id,
color: bar.color,layers.forEach(layer => {
if (layer === 'grid') {
ctx.lineWidth = theme.grid.line.strokeWidth
ctx.strokeStyle = theme.grid.line.stroke
enableGridX &&
renderGridLinesToCanvas(ctx, {
width: innerWidth,
height: innerHeight,
scale: xScale,
axis: 'x',
values: gridXValues,
})
enableGridY &&
renderGridLinesToCanvas(ctx, {
width: innerWidth,
height: innerHeight,
scale: yScale,
axis: 'y',
values: gridYValues,
})
} else if (layer === 'axes') {layers.forEach(layer => {
if (layer === 'grid' && theme.grid.line.strokeWidth > 0) {
ctx.lineWidth = theme.grid.line.strokeWidth
ctx.strokeStyle = theme.grid.line.stroke
enableGridX &&
renderGridLinesToCanvas(ctx, {
width: innerWidth,
height: innerHeight,
scale: xScale,
axis: 'x',
values: gridXValues,
})
enableGridY &&
renderGridLinesToCanvas(ctx, {
width: innerWidth,
height: innerHeight,
scale: yScale,
axis: 'y',
values: gridYValues,
})
}layers.forEach(layer => {
if (layer === 'grid' && theme.grid.line.strokeWidth > 0) {
ctx.lineWidth = theme.grid.line.strokeWidth
ctx.strokeStyle = theme.grid.line.stroke
enableGridX &&
renderGridLinesToCanvas(ctx, {
width: innerWidth,
height: innerHeight,
scale: xScale,
axis: 'x',
values: gridXValues,
})
enableGridY &&
renderGridLinesToCanvas(ctx, {
width: innerWidth,
height: innerHeight,
scale: yScale,
axis: 'y',
values: gridYValues,
})
}const result =
groupMode === 'grouped' ? generateGroupedBars(options) : generateStackedBars(options)
this.bars = result.bars
this.ctx.fillStyle = theme.background
this.ctx.fillRect(0, 0, outerWidth, outerHeight)
this.ctx.translate(margin.left, margin.top)
if (theme.grid.line.strokeWidth > 0) {
this.ctx.lineWidth = theme.grid.line.strokeWidth
this.ctx.strokeStyle = theme.grid.line.stroke
enableGridX &&
renderGridLinesToCanvas(this.ctx, {
width,
height,
scale: result.xScale,
axis: 'x',
values: gridXValues,
})
enableGridY &&
renderGridLinesToCanvas(this.ctx, {
width,
height,
scale: result.yScale,
axis: 'y',
values: gridYValues,
})
}@nivo/axes
<a href="https://nivo.rocks"><img alt="nivo" src="https://raw.githubusercontent.com/plouc/nivo/master/nivo.png" width="216" height="68"/></a>
