Legend and Tooltip styling

[Zerok24]

First let me start by thanking you for creating this amazing package. Literally the best data visualization package for react!

I am trying to add some styling to the legend, like increasing the font size, font family, add margins, font-weight, borders . Would this be done with d3plus-react?

I been able to do add some style with CSS but I don't think is the right way to do it. Also how can I do the same for the tooltips. I been using the docs in d3plus.org but haven't been able to find it.

Thanks!

[davelandry]

thanks for the kind words @Zerok24!

Legend Styles

The legend is made using the Shape class, the same as the shapes in the visualization (for both the little squares and the text labels). The legendConfig method has a nested shapeConfig object which gets passed to those shapes, and that nested object has it's own nested object for labelConfig which is used to adjust the font styles of the label associated with the shape. It's a weird nesting doll situation, but we decided to go this way to give the most access possible. Here's an example of changing the size of the legend rectangles and the font styles:

legendConfig: {
  shapeConfig: {
    labelConfig: {
        fontFamily: () => "'Source Sans Pro', sans-serif",
        fontSize: () => 16,
        fontWeight: () => 400
    },
    height: () => 10,
    width: () => 15
  }
}

All of the methods available in the shapeConfig are listed here: https://github.com/d3plus/d3plus-shape#Shape All of the methods available in the labelConfig are listed here: https://github.com/d3plus/d3plus-text#TextBox

Tooltips

Tooltips have a similar config object, accessible via tootlipConfig for the shapes in the visualization, and legendTooltip for the tooltips used in the legend. Here's an example usage:

tooltipConfig: {
  background: "white",
  border: "1px solid #888",
  footerStyle: {
    "color": "#666",
    "font-family": "'Palanquin', sans-serif",
    "font-size": "12px",
    "font-weight": "300",
    "padding-top": "5px"
  },
  padding: "10px",
  titleStyle: {
    "font-family": "'Palanquin', sans-serif",
    "font-size": "16px",
    "font-weight": "300"
  }
}

All of the available methods are listed here: https://github.com/d3plus/d3plus-tooltip#Tooltip

Additionally, since the tooltip is HTML (and not SVG), I sometimes do force overrides via CSS using the .d3plus-tooltip class (and it's nested classes).

Hope that helps, let me know if you have any more question!

[Zerok24]

That worked!!! Thanks for taking the time to help me out!!