Horizontal Stacked Bars

Horizontal Stacked Bars with Custom Tooltips

const axisTickValues = [30, 100];
const data = [[{ x: 0, y: 29 }], [{ x: 0, y: 70 }], [{ x: 0, y: 30 }]];
const styles = [
  { data: { fill: "#f3d437", stroke: "#d1b322", strokeWidth: 1 } },
  { data: { fill: "#0ca340", stroke: "#0ca340", strokeWidth: 1 } },
  { data: { fill: "#f3d437", stroke: "#d1b322", strokeWidth: 1 } },
];

const labelFn = ({ datum }) =>
  datum.y < axisTickValues[0] ? `${datum.y} Low` : `${datum.y} Normal`;

function App() {
  return (
    <div>
      <VictoryChart>
        <VictoryAxis
          dependentAxis
          tickValues={axisTickValues}
          style={{
            tickLabels: { fontSize: 10, padding: 10 },
          }}
        />
        <VictoryStack style={{ data: { width: 10 } }} horizontal>
          {data.map((d, i) => (
            <VictoryBar
              style={styles[i]}
              data={d}
              labels={i === 0 ? labelFn : undefined}
              labelComponent={
                <VictoryTooltip
                  active
                  dy={-10}
                  horizontal={false}
                  flyoutStyle={{
                    fill: "#fbf2ca",
                    stroke: "#ae9308",
                    strokeWidth: 0.5,
                  }}
                />
              }
            />
          ))}
        </VictoryStack>
      </VictoryChart>
    </div>
  );
}

render(<App/>);