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
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>
);
}
I tried changing the 'offset' and 'barWidth' parameter, but it didn't help me
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.