React-vis: Crosshair titleFormat

Created on 15 Jun 2018 · 4Comments · Source: uber/react-vis

From the docs:
titleFormat (optional)
Type: function The function that formats the title for the crosshair. Receives the list of data points, should return an object containing title and value properties. Note: please pass custom contents in case if you need different look for the crosshair.

I pass an arrow function as a prop, which includes an object with title and value properties, like so:

<Crosshair
      values={crosshairValues}
      titleFormat={(d) => {{title: 'Date', value: new Date(d[0].x).toLocaleDateString()}}}
      itemsFormat={(d) => [{title: 'Queries made', value: d[0].y}, {title: 'Matches found', value: d[1].y}]}
/>

...and get this compilation error
screen shot 2018-06-15 at 11 05 03 am

Source

cvalmonte

Most helpful comment

How to pass title as blank, right now it's displaying : valuehere, how to get rid of : when title is null for titleFormat

manu1222 on 8 Nov 2018

👍3

All 4 comments

Please understand that an Arrow function returns in-line object with this syntax

const getObj = () => ({ value: "hello world!" }); // instead of () => {{ ... }}

Your code should be:

<Crosshair
      values={crosshairValues}
      titleFormat={(d) => ({title: 'Date', value: new Date(d[0].x).toLocaleDateString()})}
      itemsFormat={(d) => [{title: 'Queries made', value: d[0].y}, {title: 'Matches found', value: d[1].y}]}
/>

😉 Btw, it's obvious that this is a Syntax error: Unexpected token, so I'd suggest finding a good IDE/Editor which will pop up warning/hint in such case.