React-vis: Hint not displaying on VerticalBarSeries

Created on 31 Jul 2018 · 5Comments · Source: uber/react-vis

I've created I codepan
https://codepen.io/anon/pen/mjpxee
forking
https://codepen.io/ubervisualization/pen/BZOeZB
and I want to show Hint on red series in a way it is done here:
https://github.com/uber/react-vis/blob/master/showcase/sunbursts/sunburst-with-tooltips.js
But code on lines 39-44 does not produce tooltips as desired.

question

Source

VVranic

👍1

Most helpful comment

Hey @VVranic

Sorry about the slow reply. I spent some time looking at your chart and it appears that you have a syntax error. Specifically you are listing the Hint as a child of one of the bar series. Series never have children: their children are the marks representing their data and we control that for you. In order to fix this I moved your hint out side of the series like so:

(<XYPlot
           height={300}
           width= {800}
           xType="ordinal"
           stackBy="y"
           style={{marginTop:"100px"}}
           >
          <XAxis />
          <VerticalBarSeries
            onValueMouseOver={MOUSEOVER}
           onValueMouseOut={MOUSEOUT}
            color="#ff5b3c"
            data={DATA} />
          <VerticalBarSeries color="#9f6eff"  data={DATA}/>
          <VerticalBarSeries color="#ffeb30" data={[DATA]}/>
          <VerticalBarSeries color="#2be84e" data={[DATA]}/>
          <VerticalBarSeries color="#3cadff" data={[DATA]}/>
          {hoveredCell && <Hint value={hoveredCell}>HINT FORMATTING STUFF</Hint>}
        </XYPlot>);

(I've contracted a bunch of your example into shouting constants for legibility)

mcnuttandrew on 12 Sep 2018

👍3

All 5 comments

Hello.

If someone could please help me with this. I don't know how value should look like for Hint to be displayed properly.

Thank you

VVranic on 10 Sep 2018

Hey @VVranic

(<XYPlot
           height={300}
           width= {800}
           xType="ordinal"
           stackBy="y"
           style={{marginTop:"100px"}}
           >
          <XAxis />
          <VerticalBarSeries
            onValueMouseOver={MOUSEOVER}
           onValueMouseOut={MOUSEOUT}
            color="#ff5b3c"
            data={DATA} />
          <VerticalBarSeries color="#9f6eff"  data={DATA}/>
          <VerticalBarSeries color="#ffeb30" data={[DATA]}/>
          <VerticalBarSeries color="#2be84e" data={[DATA]}/>
          <VerticalBarSeries color="#3cadff" data={[DATA]}/>
          {hoveredCell && <Hint value={hoveredCell}>HINT FORMATTING STUFF</Hint>}
        </XYPlot>);

(I've contracted a bunch of your example into shouting constants for legibility)

mcnuttandrew on 12 Sep 2018

👍3

Hi @mcnuttandrew,
thank you very much for your time and explanation.
It works very well, when you put it in the right place :)

VVranic on 13 Sep 2018

Happy to help!

mcnuttandrew on 13 Sep 2018

@mcnuttandrew Hi, how to convert individual stacked bar data in one tooltip, just like first bar graph shown here: https://uber.github.io/react-vis/examples/showcases/plots