Nivo: Feature Request: Add label to Marker

Created on 13 Dec 2018  路  3Comments  路  Source: plouc/nivo

Hello,
Is there a built-in way to add a static label at a particular (x,y) coordinate? I would like to add a label to a marker I added to a Bar chart. I saw labels were added to the markers in the storybook stories (ex: https://nivo.rocks/storybook/?selectedKind=Bar&selectedStory=with%20marker&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs), but didn't see how it was done.

Love this library, great work!

Most helpful comment

This was in the source code under - https://github.com/plouc/nivo/blob/master/examples/typescript/src/components/Line.tsx

```
markers={[
{
axis: 'x',
value: 4,
legend: 'X marker a 4',
lineStyle: {
stroke: 'blue',
},
textStyle: {
fill: 'blue',
},
},
{
axis: 'y',
value: 4,
legend: 'Y marker at 4',
lineStyle: {
stroke: 'red',
},
textStyle: {
fill: 'red',
},
},
]}

All 3 comments

I'm also interested in the answer to this. It seems like you can add a custom component as a marker but I'm wondering what the correct prop name is to add to the marker - thanks!

@evalineBai I got around this issue by creating a custom legend for my chart (independent of the nivo legend), and specifying a label for the marker by its color
image

This was in the source code under - https://github.com/plouc/nivo/blob/master/examples/typescript/src/components/Line.tsx

```
markers={[
{
axis: 'x',
value: 4,
legend: 'X marker a 4',
lineStyle: {
stroke: 'blue',
},
textStyle: {
fill: 'blue',
},
},
{
axis: 'y',
value: 4,
legend: 'Y marker at 4',
lineStyle: {
stroke: 'red',
},
textStyle: {
fill: 'red',
},
},
]}

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Buvaneshkumar7 picture Buvaneshkumar7  路  3Comments

serendipity1004 picture serendipity1004  路  3Comments

KENNYSOFT picture KENNYSOFT  路  3Comments

luisrudge picture luisrudge  路  3Comments

stahlmanDesign picture stahlmanDesign  路  3Comments