Add Charts into Our React App with Victory — Tooltips

Photo by Goke Obasa on Unsplash

The Victory lets us add charts and data visualization into our React app.

In this article, we’ll look at how to add charts into our React app with Victory.

Tooltips

We can add tooltips to charts.

For example, we can write:

import React from "react";
import { VictoryBar, VictoryChart, VictoryTooltip } from "victory";
export default function App() {
return (
<div>
<VictoryChart domain={{ x: [0, 11], y: [-10, 10] }}>
<VictoryBar
labelComponent={<VictoryTooltip />}
data={[
{ x: 2, y: 5, label: "right-side-up" },
{ x: 4, y: -6, label: "upside-down" },
{ x: 6, y: 4, label: "tiny" },
{ x: 8, y: -5, label: "or a little \n BIGGER" },
{ x: 10, y: 7, label: "automatically" }
]}
style={{
data: { fill: "tomato", width: 20 }
}}
/>
</VictoryChart>

</div>
);
}

We set the labelComponent to the VictoryTooltip component to show the tooltip.

Also, we can change the tooltip styles with a few props:

import React from "react";
import { VictoryBar, VictoryChart, VictoryTooltip } from "victory";
export default function App() {
return (
<div>
<VictoryChart domain={{ x: [0, 11], y: [-10, 10] }}>
<VictoryBar
labelComponent={
<VictoryTooltip
cornerRadius={({ datum }) => (datum.x > 6 ? 0 : 20)}
pointerLength={({ datum }) => (datum.y > 0 ? 5 : 20)}
flyoutStyle={{
stroke: ({ datum }) => (datum.x === 10 ? "tomato" : "black")
}}
/>
}
data={[
{ x: 2, y: 5, label: "right-side-up" },
{ x: 4, y: -6, label: "upside-down" },
{ x: 6, y: 4, label: "tiny" },
{ x: 8, y: -5, label: "or a little \n BIGGER" },
{ x: 10, y: 7, label: "automatically" }
]}
style={{
data: { fill: "tomato", width: 20 }
}}
/>
</VictoryChart>

</div>
);
}

VictoryVoronoiContainer

The VictoryVoronoiContainer lets us add tooltips to a line or to data points that are too small to hover over.

For instance, we can write:

import React from "react";
import {
VictoryChart,
VictoryScatter,
VictoryTooltip,
VictoryVoronoiContainer
} from "victory";
export default function App() {
return (
<div>
<VictoryChart
domain={{ x: [0, 5], y: [-5, 5] }}
containerComponent={<VictoryVoronoiContainer />}
>
<VictoryScatter
style={{
data: { fill: "tomato" },
labels: { fill: "tomato" }
}}
size={({ active }) => (active ? 5 : 3)}
labels={({ datum }) => datum.y}
labelComponent={<VictoryTooltip />}
data={[
{ x: 1, y: -4 },
{ x: 2, y: 4 },
{ x: 3, y: 2 },
{ x: 4, y: 1 }
]}
/>
<VictoryScatter
style={{
data: { fill: "blue" },
labels: { fill: "blue" }
}}
size={(datum, active) => (active ? 5 : 3)}
labels={({ datum }) => datum.y}
labelComponent={<VictoryTooltip />}
data={[
{ x: 1, y: -3 },
{ x: 2, y: 3 },
{ x: 3, y: 3 },
{ x: 4, y: 0 }
]}
/>
<VictoryScatter
data={[
{ x: 1, y: 4 },
{ x: 2, y: -4 },
{ x: 3, y: -2 },
{ x: 4, y: -3 }
]}
labels={({ datum }) => datum.y}
labelComponent={<VictoryTooltip />}
size={({ active }) => (active ? 5 : 3)}
/>
</VictoryChart>
</div>
);
}

We set the containerComponent prop’s value to VictoryVoronoiContainer to add the tooltip.

The content is set by the labels prop.

Conclusion

We can add various kinds of tooltips to our charts with React Victory.


Add Charts into Our React App with Victory — Tooltips was originally published in DataSeries on Medium, where people are continuing the conversation by highlighting and responding to this story.