How to use @nivo/axes - 10 common examples
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 / scatterplot / src / ScatterPlotCanvas.js View on Github 
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') {
renderAxesToCanvas(ctx, {
xScale,
yScale,
width: innerWidth,
height: innerHeight,
top: axisTop,
right: axisRight,
bottom: axisBottom,
left: axisLeft,
theme,
})
} else if (layer === 'nodes') {
nodes.forEach(node => {
renderNode(ctx, node)
})
} else if (layer === 'mesh') {
if (debugMesh === true) {legendData = legendDataForIndexes
}
if (legendData === undefined) return null
renderLegendToCanvas(this.ctx, {
...legend,
data: legendData,
containerWidth: width,
containerHeight: height,
itemTextColor: '#999',
symbolSize: 16,
theme,
})
})
renderAxesToCanvas(this.ctx, {
xScale: result.xScale,
yScale: result.yScale,
width,
height,
top: axisTop,
right: axisRight,
bottom: axisBottom,
left: axisLeft,
theme,
})
result.bars.forEach(bar => {
const { x, y, color, width, height } = bar
this.ctx.fillStyle = color
if (borderWidth > 0) {axis: 'x',
values: gridXValues,
})
enableGridY &&
renderGridLinesToCanvas(ctx, {
width: innerWidth,
height: innerHeight,
scale: yScale,
axis: 'y',
values: gridYValues,
})
}
if (layer === 'axes') {
renderAxesToCanvas(ctx, {
xScale,
yScale,
width: innerWidth,
height: innerHeight,
top: axisTop,
right: axisRight,
bottom: axisBottom,
left: axisLeft,
theme,
})
}
if (layer === 'nodes') {
nodes.forEach(node => {
renderNode(ctx, {
node,axis: 'x',
values: gridXValues,
})
enableGridY &&
renderGridLinesToCanvas(ctx, {
width: innerWidth,
height: innerHeight,
scale: yScale,
axis: 'y',
values: gridYValues,
})
}
if (layer === 'axes') {
renderAxesToCanvas(ctx, {
xScale,
yScale,
width: innerWidth,
height: innerHeight,
top: axisTop,
right: axisRight,
bottom: axisBottom,
left: axisLeft,
theme,
})
}
if (layer === 'areas' && enableArea === true) {
ctx.save()
ctx.globalAlpha = areaOpacitythis.ctx.scale(pixelRatio, pixelRatio)
let renderNode
if (cellShape === 'rect') {
renderNode = partial(renderRect, this.ctx, { enableLabels, theme })
} else {
renderNode = partial(renderCircle, this.ctx, { enableLabels, theme })
}
const nodes = computeNodes(props)
this.ctx.fillStyle = theme.background
this.ctx.fillRect(0, 0, outerWidth, outerHeight)
this.ctx.translate(margin.left + offsetX, margin.top + offsetY)
renderAxesToCanvas(this.ctx, {
xScale,
yScale,
width: width - offsetX * 2,
height: height - offsetY * 2,
top: axisTop,
right: axisRight,
bottom: axisBottom,
left: axisLeft,
theme,
})
this.ctx.textAlign = 'center'
this.ctx.textBaseline = 'middle'
nodes.forEach(renderNode)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>
