What We DoOur WorkCareersOpen SourceJournalContact
  • What We Do
  • Our Work
  • Careers
  • Open Source
  • Journal
  • Contact
AboutDocsGallerySupportGitHub
Back to Gallery

Stacked Bars with Central Axis

const dataA = [
  { x: "Personal Drones", y: 57 },
  { x: "Smart Thermostat", y: 40 },
  { x: "Television", y: 38 },
  { x: "Smartwatch", y: 37 },
  { x: "Fitness Monitor", y: 25 },
  { x: "Tablet", y: 19 },
  { x: "Camera", y: 15 },
  { x: "Laptop", y: 13 },
  { x: "Phone", y: 12 }
];

const dataB = dataA.map((point) => {
  const y = Math.round(point.y + 3 * (Math.random() - 0.5));
  return { ...point, y };
});

const width = 500;
const height = 500;
const padding = { top: 80, bottom: 80, left: 20, right: 20 };

class App extends React.Component {

  render() {
    return (
      <svg viewBox={`0 0 ${width} ${height}`}
        style={{ width: "100%", height: "auto" }}
      >
        <VictoryStack horizontal
          standalone={false}
          /* setting a symmetric domain makes it much easier to center the axis  */
          domain={{ y: [-60, 60] }}
          padding={padding}
          height={height}
          width={width}
          style={{ data: { width: 20 }, labels: { fontSize: 11 } }}
        >
          <VictoryBar
            style={{ data: { fill: "tomato" } }}
            data={dataA}
            y={(data) => (-Math.abs(data.y))}
            labels={({ datum }) => (`${Math.abs(datum.y)}%`)}
          />
          <VictoryBar
            style={{ data: { fill: "orange" } }}
            data={dataB}
            labels={({ datum }) => (`${Math.abs(datum.y)}%`)}
          />
        </VictoryStack>

        <VictoryAxis dependentAxis
          height={height}
          width={width}
          padding={padding}
          style={{
            axis: { stroke: "transparent" },
            ticks: { stroke: "transparent" },
            tickLabels: { fontSize: 11, fill: "black" }
          }}
          /*
            Use a custom tickLabelComponent with
            an absolutely positioned x value to position
            your tick labels in the center of the chart. The correct
            y values are still provided by VictoryAxis for each tick
          */
          tickLabelComponent={<VictoryLabel x={250} textAnchor="middle"/>}
          tickValues={dataA.map((point) => point.x).reverse()}
        />
      </svg>
    );
  }
}

ReactDOM.render(<App/>, mountNode);
ContactCareers
Victory is a trademark of Formidable Labs, Inc.