Legend and Tooltip styling about d3plus-react HOT 2 CLOSED

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

from d3plus-react.

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!

from d3plus-react.