spacing and stuff

HTML

<script src="https://unpkg.com/react@15.5.4/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/prop-types@15.5.8/prop-types.min.js"></script>
<script src="https://npmcdn.com/victory@0.21.3/dist/victory.min.js"></script>
<div id="app"></div>

Babel + JSX

/* Victory requires `react@^15.5.0` and `prop-types@^15.5.0` */
const { VictoryChart, VictoryBar, VictoryAxis, VictoryLabel } = Victory;
const renderTarget = document.getElementById('app');

class App extends React.Component {

	render() {
  
  	const data = [
      { quarter: 1, earnings: 1900 },
      { quarter: 2, earnings: 1250 },
      { quarter: 3, earnings: 1500 },
      { quarter: 4, earnings: 1000 }  
    ];
  
  	return <VictoryChart
      width={600}
      padding={{left:130, right: 100}}
      domainPadding={{ y: 50, x: 200 }}>
      <VictoryAxis
        tickLabelComponent={<VictoryLabel textAnchor="start" x={10} />}
        dependentAxis
        offsetX={90}
        style={{ tickLabels: {fontSize: 15} }}
        tickValues={[1, 2, 3, 4]}
        tickFormat={["Yes", "No", "Probably", "Never"]}        
      />
      <VictoryBar horizontal
        offsetY={24}
        padding={{ left: 70 }}
        style={{ data: { fill: "rgb(23, 52, 76)" } }}
        labels={(d) => ("| " + d.y + " (22%)")}
        data={data}
        x="quarter"
        y="earnings"
      />
    </VictoryChart>;
  }
 }
 
ReactDOM.render(<App/>, renderTarget);