The data does not fit on the VictoryBar chart

I make a graph using the Victory library. I need to build a grouped VictoryBar, so I use VictoryGroup to do that.

But I have a lot of data, and the data doesn’t fit on the graph. How can I enlarge the graph so that the y-axis data doesn’t get mixed up?

If there is less data, the data is placed on the graph

import "./styles.css";
import plotData from "./data.json";
import React from "react";
import { VictoryBar, VictoryChart, VictoryGroup } from "victory";
export default function App() {
  let arr1 = [];
  let arr2 = [];
  let arr1Sum = 0;
  let arr2Sum = 0;, index) => {
    arr1Sum += plotData.ofac_share;
    arr2Sum += plotData.non_ofac_share;
  });, index) => {
      y: (plotData.ofac_share / arr1Sum) * 100,
      x: plotData.validator
      y: (plotData.non_ofac_share / arr2Sum) * 100,
      x: plotData.validator

  return (
      <VictoryGroup offsetY={10} colorScale={["tomato", "orange"]}>
        <VictoryBar horizontal barWidth={3} data={arr1} />
        <VictoryBar horizontal barWidth={3} data={arr2} />

enter image description here

I tried changing the ‘offset’ and ‘barWidth’ parameter, but it didn’t help me

>Solution :

As per documentation, as well as other layout configurations, the VictoryChart component supports a height property:

<VictoryChart height={600}>
        colorScale={['tomato', 'orange']}

Here is the link to the relevant Victory documentation section, but here is a snippet from that link that summarises:

Victory components have default width, height, and padding props defined in the default grayscale theme.

Hope this helps.

Leave a Reply