Working on adding left domainPadding to a group of many bars. I'm having success with pushing other graphs over. But, when there's 24 groups, the spacing doesn't seem to be working. Oddly, padding can be applied on the right.
I've tried adding domain padding to the children as well. But, as far as I understand, domainPadding is best applied to the parent. I've also looked into styling the victory groups differently, with padding. But that hasn't affected the left domain padding.
export default function GroupedBarChart(props) {
const { groups, barWidth } = props;
const getBarData = x => {
// how many items per group
return [1, 2].map(() => {
return [{ x: x, y: Math.random() }];
});
};
const barGroups = groups.map(groupNumber => {
return (
<VictoryGroup
key={groupNumber}
// this is so the width of the groups
// so that they're next to each other
offset={barWidth}
style={{ data: { width: barWidth } }}
colorScale={[colors.gray2, colors.orange]}
>
{/* todo: remove index check here */}
{getBarData(groupNumber).map((data, index) => {
return <VictoryBar style={{ padding: 0 }} key={index} data={data} />;
})}
</VictoryGroup>
);
});
return (
<div>
<VictoryChart
domainPadding={{ x: [1000, 0], y: [1000, 0] }}
height={500}
width={1000}
>
{barGroups}
</VictoryChart>
</div>
);
With right padding, working as expected
<VictoryChart domainPadding={{ x: [0, 1000] }} height={500} width={1000}>
huh update: Seem to be working as expected in the repl. I may be overdoing it with the groups. Will look into refactoring
<VictoryChart>
<VictoryGroup offset={20}
colorScale={"qualitative"}
domainPadding={{"x": [100,0]}}
>
<VictoryBar
data={[{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 5 }]}
/>
<VictoryBar
data={[{ x: 1, y: 2 }, { x: 2, y: 1 }, { x: 3, y: 7 }]}
/>
<VictoryBar
data={[{ x: 1, y: 3 }, { x: 2, y: 4 }, { x: 3, y: 9 }]}
/>
</VictoryGroup>
</VictoryChart>
```
another update: I tried an example and it didn't work. so I just added my data into the code sandbox to try it out:
<VictoryChart>
<VictoryGroup offset={20}
colorScale={"qualitative"}
domainPadding={{"x": [10000,0]}}
>
<VictoryBar
data={[{x: 0, y: 0.3744035708465676},
{x: 1, y: 0.64174866418672},
{x: 2, y: 0.8110078815643782},
{x: 3, y: 0.669879407000904},
{x: 4, y: 0.570670123656529},
{x: 5, y: 0.8408945715902485},
{x: 6, y: 0.7677672514109137},
{x: 7, y: 0.8212482640335745},
{x: 8, y: 0.7643468180267963},
{x: 9, y: 0.5825952909464707},
{x: 10, y: 0.269948491629747},
{x: 11, y: 0.7570388400682404},
{x: 12, y: 0.911252788067106},
{x: 13, y: 0.6239947933729291},
{x: 14, y: 0.5411845429096691},
{x: 15, y: 0.7184428735033308},
{x: 16, y: 0.9954958873422699},
{x: 17, y: 0.5964462540643591},
{x: 18, y: 0.223519488850368},
{x: 19, y: 0.7347533840524954},
{x: 20, y: 0.22213300969026228},
{x: 21, y: 0.6156283735125008},
{x: 22, y: 0.782954982095426},
{x: 23, y: 0.7111718524122344},
]}
/>
<VictoryBar
data={ [{x: 0, y: 0.3744035708465676},
{x: 1, y: 0.64174866418672},
{x: 2, y: 0.8110078815643782},
{x: 3, y: 0.669879407000904},
{x: 4, y: 0.570670123656529},
{x: 5, y: 0.8408945715902485},
{x: 6, y: 0.7677672514109137},
{x: 7, y: 0.8212482640335745},
{x: 8, y: 0.7643468180267963},
{x: 9, y: 0.5825952909464707},
{x: 10, y: 0.269948491629747},
{x: 11, y: 0.7570388400682404},
{x: 12, y: 0.911252788067106},
{x: 13, y: 0.6239947933729291},
{x: 14, y: 0.5411845429096691},
{x: 15, y: 0.7184428735033308},
{x: 16, y: 0.9954958873422699},
{x: 17, y: 0.5964462540643591},
{x: 18, y: 0.223519488850368},
{x: 19, y: 0.7347533840524954},
{x: 20, y: 0.22213300969026228},
{x: 21, y: 0.6156283735125008},
{x: 22, y: 0.782954982095426},
{x: 23, y: 0.7111718524122344},
]}
/>
</VictoryGroup>
</VictoryChart>```