Creating chart tooltips with VictoryJs
Recently, I have been using VictoryJs to create charts in my ReactJs applications. VictoryJs is an opensource library from Formidable Labs based in Seattle. The beauty of this library is that it's based on React and therefore it has multiple components that enable you to compose different types of charts. Today though we are going to discover more about the VictoryTooltip component.
When you design a chart there is always a need to enable a user to see more information about a specific point on the chart when they hover over it. The VictoryTooltip component enables us to do just that.
Basic tooltip
Let's have a look at a basic/simplest tooltip you can create with the VictoryTooltip component. To demonstrate this we are using the VictoryChart container and VictoryBar component to design/visualize a bar chart as shown below.
It is important to note that the data elements include a label property that will be used as the data for the VictoryTooltip. Below is the bar chart from the code above.
By default, Victory shows the label above each bar as shown above, but we only want the label to be shown when a user hovers over a bar. To achieve this, we use the VictoryTooltip component as a labelComponent prop to the VictoryBar and the chart will look as shown below.
labelComponent={<VictoryTooltip />}
On hover:
The default VictoryTooltip can be customized using some props that can be supplied to it. For example, the pointer length can be increased/reduced, the flyout text font and size can be adjusted. Checkout the VictoryTooltip docs for more information about the different props. Below is the code to style the tooltip flyout component and the font style.
labels prop
Sometimes you might not have the label property within your data but you still want to have a tooltip with some information. VictoryJs provides a labels prop that can be added to the VictoryBar component and used to format the text for the tooltip. The function of this prop is passed the data(datum) of the currently hover bar/chart element. This prop will only be considered by VictoryBar when the data has no label property. The line of code below shows how the text that is appearing in the tooltips is to be formatted.
labels={({ datum }) => `Name: ${datum.name} score: ${datum.score}`}
Below is the code for the above chart.
Custom Flyout component
There are times when you want to add more information in the tooltip and you realize that the default Flyout component will not be able to visualize your tooltip text in the format you desire. In that case, you can create a custom Flyout component and add it to the VictoryTooltip as flyoutComponent prop. Below is a custom Flyout React component.
Use the <g> SVG element as a container for the different SVG elements. In this case, we have a rectangle and text elements SVG elements. The text elements are used to show the name and score for a specific point. It is important to note that VictoryJs passes a number of props to this Flyout component, above we use the x y dx dy and datum more props are passed and here is a full list of them all. Use the x and y values to determine the position of the rectangle and text elements within it as shown in the code snippet above.
Using HTML elements within SVG using ForeignObject element.
There are instances when SVG elements are limit, for example, you might want to create a tooltip with some HTML elements instead of SVG elements only. All this is possible, thanks to the ForeignObject SVG element that enables us to embed HTML elements within SVG elements as shown below.
As you can see it is similar to the Flyout component from before but the main difference is the foreignObject element which enables us to add HTML/React components/JSX within an SVG element. We can then style the HTML elements normally using CSS style properties. Below is the Tooltip on the chart when a bar is hovered over.
We have come to the end of this guide, feel free to check out the VictoryJs documentation to learn a lot more about visualizing/composition of charts in ReactJs. Here is the Github repo with the code.
