There is currently no way to change the tooltip styles

[jshthornton]

The tooltip doesn't expose any props to change its styles nor a class. I could make a PR to change this, what key would you want to use for styling the tooltip?

[yang-wei]

This is one of my todo on mind.

what key would you want to use for styling the tooltip

I would like to make tool tip a pure component where you can pass a component as props.

<LineChart
   tooltip={props => {
    <div>own style </div>
    ...
 }}

So that user can decide the style and class by themself. What do you think about this approach?

[jshthornton]

I think making it a pure component is definitely the right way of going about this. It might be good to provide a default one in the repo for people to use who do not care about a custom one.

[yang-wei]

todo:

• [ ] tooltip component as prop
• [ ] apply tooltip to other charts
• [ ] documentation

[gianlucasudano]

tooltipFormat = { (d) => {
                    var sem = (d.xValue.getMonth() >= 6)? sem = '2° sem': sem = '1° sem'
                    return <div className="tooltip">
                                € {String(d.yValue)}
                                <div>{sem} {d.xValue.getFullYear()}</div>
                            </div>
                }}

just a workaround but it works for me

is there a way to hook / obtain the same behavior of tooltip also for onclik event in the circle?

[dmk23]

I am using tooltipFormat workaround as well. A significant limitation right now though is that I cannot access data for ALL series in the tooltip. Imagine we are plotting ~5 different Y metrics. When I hover over a datapoint I'd like to be able to display them all. The tooltip API should provide full access to all data...

[dalhorinek]

I extened in my fork the Tooltip (at least for LineChart) to accept tooltipStyles and tooltipContainerStyles so you can customize the styles (as these are hardcoded in the Tooltip component).

If you're interested I can PR it.

[yang-wei]

Thanks for that but in the next major release, toolTip will be excluded and you can use hoc to style your own tooltip

[dmk23]

Is there an ETA for that next major release?

[yang-wei]

@dmk23 I can't give you any promise about it yet but you can see my WIP work on this pr https://github.com/yang-wei/rd3/pull/41 This library needs a almost rewrite work to be done if we are moving to latest d3.

Basically the ideal api will be something like:

import { BarChart } from 'rd3';

// normal barChart component ( same as currently api)
class NormalBarChart extends Component {
  render() {
    <BarChart data={props.data}  />
  }
}

// tool tip barChart component ( your own handler wrapper )
class ToolTipBarChart extends Component {
  onMouseOverHandler(data) {
    // update tool tip state
   // see * for data
  }

 onMouseLeaveHander(data) {
   // update tool tip state
  }

  render() {
    <div>
      <ToolTipComponent data={state.toolTip} />
      <BarChart
       data={props.data}
       onMouseOver={this.onMouseOverHandler}
       onMouseLeave={this.onMouseLeaveHandler} />
    </div>
  }
}

rd3 will no more handle any state ( we will let you handle you state ) So not only tool tip, you can make your own wrapper for anything including legend, drawing a line on graph, double y axis...

What do you think about this kind of implementation. For simple chart, rd3 will do everything for you nicely. If you need animation or complex chart, rd3 assists you to.

*The difficult thing here is what data should we pass up in our onMouseOver and onMouseLeave argument. We need some kind of unique id to make sure update can be done correctly. I am open to any suggestion

[dmk23]

Looks good, but I'll need to look into details a bit later.

My own wrappers for everything (especially legends / labeles) is another thing I wanted to post an issue / request about. E.g. we have lots of data series where X is some "object_id" that should be really represented / displayed via some discrete labels with the need for special and possibly changeable / configurable formatting. If you could get your code out in some form of beta, I'd eagerly test it....

One more question / thing / request - charts that would be zoomable / scrollable. E.g. if we request daily breakdowns for some metric for 3 months we'd have 90 X datapoints that would look busy on a chart. If for example we could have a scrolling window or "every Nth" sampling or whatever - that might be very helpful.... We could of course partially address this in the data preparation step, but making it more naturally integrated into the chart itself could be tremendously helpful.

Anyhow - I stand ready to help test / bounce off design ideas...

[yang-wei]

charts that would be zoomable / scrollable.

sounds like brushing. I never implemented it into our library but this can be considerable. And I believe in the approach this library is going, it's possible =)