How can I use a visual image for the labels in my bar chart in Victory (React Library for Data Viz)

Question

Current Set Up

I am using a bar chart to visualize data. On the Y-axis, I have categorical variables and I want to use images instead of the text labels. How should I go about doing that? Thanks!

Answer 1

I looked into this and found the answer, hope it helps someone else stumbling upon this post some day :)

Using React:

Define your custom tick (containing the image):

const CustomTick = ({ x, y, text }) => {
    return <foreignObject x={x - 12} y={y - 8} width={16} height={16}><img src={imageSource} /></foreignObject>;
};

Use it in your chart (depending on which axis you'd like to show the image set tickLabelComponent on either the axis with dependentAxis or the one without):

<VictoryChart ...props>
    <VictoryAxis tickLabelComponent={<CustomTick />} />
    <VictoryAxis dependentAxis />
    ...charts
</VictortChart>