How to use @nivo/legends - 10 common examples
To help you get started, we’ve selected a few @nivo/legends 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 / examples / typescript / src / components / Bar.tsx View on Github 
tickValues: 5,
}}
axisBottom={{
legend: 'THINGS',
legendPosition: AxisLegendPosition.Middle,
legendOffset: 36
}}
markers={[
{
crap: true
}
]}
legends={[
{
dataFrom: 'keys',
anchor: LegendAnchor.BottomRight,
direction: LegendDirection.Column,
itemWidth: 100,
itemHeight: 32,
translateX: 120,
}
]}
onClick={(d: any) => {
console.log(d)
}}
/>
)
}
}}}
axisBottom={{
legend: 'THINGS',
legendPosition: AxisLegendPosition.Middle,
legendOffset: 36
}}
markers={[
{
crap: true
}
]}
legends={[
{
dataFrom: 'keys',
anchor: LegendAnchor.BottomRight,
direction: LegendDirection.Column,
itemWidth: 100,
itemHeight: 32,
translateX: 120,
}
]}
onClick={(d: any) => {
console.log(d)
}}
/>
)
}
}legends.forEach(legend => {
renderLegendToCanvas(this.ctx, {
...legend,
data: legendData,
containerWidth: width,
containerHeight: height,
theme,
})
})
}legends.forEach(legend => {
renderLegendToCanvas(ctx, {
...legend,
data: legend.data || legendData,
containerWidth: innerWidth,
containerHeight: innerHeight,
theme,
})
})
}legends.forEach(legend => {
renderLegendToCanvas(this.ctx, {
...legend,
data: legendData,
containerWidth: width,
containerHeight: height,
})
})
}legends.forEach(legend => {
renderLegendToCanvas(this.ctx, {
...legend,
data: arcs.map(arc => ({
id: arc.data.id,
label: arc.data.id,
color: arc.color,
})),
containerWidth: width,
containerHeight: height,
theme,
})
})
}legends.forEach(legend => {
let legendData
if (legend.dataFrom === 'keys') {
legendData = legendDataForKeys
} else if (legend.dataFrom === 'indexes') {
legendData = legendDataForIndexes
}
if (legendData === undefined) return null
renderLegendToCanvas(this.ctx, {
...legend,
data: legendData,
containerWidth: width,
containerHeight: height,
itemTextColor: '#999',
symbolSize: 16,
theme,
})
})legends.forEach(legend => {
renderLegendToCanvas(ctx, {
...legend,
data: legendData,
containerWidth: width,
containerHeight: height,
theme,
})
})
} else {legends.forEach(legend => {
const legendData = colorScale.ticks(legend.itemCount).map(value => ({
id: value,
label: value,
color: colorScale(value),
}))
renderLegendToCanvas(this.ctx, {
...legend,
data: legendData,
containerWidth: width,
containerHeight: height,
theme,
})
})
}legends.forEach(legend => {
renderLegendToCanvas(ctx, {
...legend,
data: legendData,
containerWidth: innerWidth,
containerHeight: innerHeight,
theme,
})
})@nivo/legends
legend components for nivo dataviz library
