Victory Charts: Using labels with bar charts - reactjs

Question

I am leveraging VictoryCharts to add charts to my React app. I am trying to accomplish something like:
I combed through the docs and was not able to find a way to add Labels to a single bar chart.
Things I have tried
Nesting <VictoryLabel> andunder``` --> The axes show up and the docs recommend using VictoryGroup
Nesting <VictoryLabel> andunder``` --> VictoryGroup does not support VictoryLabel
Tried making a standalone <VictoryBar> & <VictoryLabel> and embedding it into <svg> --> Cannot see the chart contents on the page
This is the snippet I have right now:
import Box from '#material-ui/core/Box';
import React from 'react';
import { VictoryAxis, VictoryBar, VictoryChart, VictoryContainer, VictoryLabel, VictoryTheme } from 'victory';
const SampleChart = ({ stat=25, title = 'Sample' }) => (
<Box ml={5}>
<svg height={60} width={200}>
<VictoryLabel text={title.toLocaleUpperCase()} textAnchor='start' verticalAnchor='end' />
<VictoryBar
barWidth={10}
data={[{ y: [stat], x: [1] }]}
domain={{ y: [0, 100], x: [0, 1] }}
horizontal
labels={d => d.y}
labelComponent={
<VictoryLabel verticalAnchor='end' textAnchor='start' />
}
standalone
style={{ parent: { height: 'inherit' } }}
theme={VictoryTheme.material}
/>
</svg>
</Box>
);
ReactDOM.render(<SampleChart />, document.querySelector("#app"))
<div id='app'></div>

Answer 1

You could use an axis to this effect like so:
const CHART_WIDTH = 800;
const val = 28
function BarChart() {
return (
<div style={{ width: CHART_WIDTH }}>
<VictoryChart height={200} width={CHART_WIDTH}>
<VictoryAxis
dependentAxis
tickValues={[0,100]}
offsetY={190}
tickFormat={t => t===0 ? 'average age' : val}
style={{axis: { stroke: 'none'}}}
/>
<VictoryBar
barWidth={10}
data={[{ y: [45], x: [1] }]}
domain={{ y: [0, 100], x: [0, 1] }}
horizontal
/>
</VictoryChart>
</div>
);
}
https://codepen.io/anon/pen/RmaxOd?editors=0110#0
Not exactly what you wanted, but it gets the job done, and you can format the tick labels or provide custom components to make it look like your desired result.