Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

https://codesandbox.io/s/zen-edison-fb8dy4?file=/src/App.js

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;

  plotData.map((plotData, index) => {
    arr1Sum += plotData.ofac_share;
    arr2Sum += plotData.non_ofac_share;
  });

  plotData.map((plotData, index) => {
    arr1.push({
      y: (plotData.ofac_share / arr1Sum) * 100,
      x: plotData.validator
    });
    arr2.push({
      y: (plotData.non_ofac_share / arr2Sum) * 100,
      x: plotData.validator
    });
  });

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

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}>
    <VictoryGroup
        offsetY={10}
        colorScale={['tomato', 'orange']}
    >
        <VictoryBar
            horizontal
            barWidth={3}
            data={arr1}
        />
        <VictoryBar
            horizontal
            barWidth={3}
            data={arr2}
        />
    </VictoryGroup>
</VictoryChart>;

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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading