Chart order affects axis

[andy-root]

Is there an existing issue for this?

• I have searched the existing issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Victory version

37

Code Sandbox link

btw, sandbox is broken and gives a Unexpected number otherwise I would provide a link.

Bug report

Not sure if this is a bug, I have a VictoryChart with a VictoryBar and VictoryLine. I want the VictoryLine overlayed on the VictoryBar so the line renders over the bar. My VictoryBar does not have an x or y for every x that the line has so if I put the VictoryBar first it will break the chart and renders the data incorrectly. It appears the chart renders a full set of data must be first. This prevents me from rendering the charts in the correct order.

Steps to reproduce

This chart renders the data correctly but the bar renders over the line which is not what I want.

const smallData = [
    {"date":"9/23/24","units":55,"event":"","asp":15.99,"total":55,"index":1},
    {"date":"10/25/24","units":300,"event":"e1","asp":4.99,"total":355,"index":2},
    {"date":"11/26/24","units":55,"event":"","asp":15.99,"total":410,"index":3},
    {"date":"12/28/24","units":55,"event":"e2","asp":15.99,"total":465,"index":4},
    {"date":"1/29/25","units":55,"event":"","asp":15.99,"total":520,"index":5},
    {"date":"3/2/25","units":55,"event":"","asp":15.99,"total":575,"index":6},
];
...
<VictoryChart width={800} height={400} >
    <VictoryLine
        data={smallData}
        x="date"
        y="total"
    />
    <VictoryBar
        data={smallData}
        x={(d) => d.event ? d.date : ''}
        y={(d) => d.event ? 575 : ''}
        style={{ data: {fill: '#F7F6F8', borderRadius: 0}}}
        cornerRadius={0}
    />
    <VictoryAxis dependentAxis label="Y axis - Units" data={smallData} y="total"/>
    <VictoryAxis label="X axis - Date" data={smallData} x={'date'}/>
</VictoryChart>

This chart renders the data incorrectly and line renders over the bar which is what I want.

const smallData = [
    {"date":"9/23/24","units":55,"event":"","asp":15.99,"total":55,"index":1},
    {"date":"10/25/24","units":300,"event":"e1","asp":4.99,"total":355,"index":2},
    {"date":"11/26/24","units":55,"event":"","asp":15.99,"total":410,"index":3},
    {"date":"12/28/24","units":55,"event":"e2","asp":15.99,"total":465,"index":4},
    {"date":"1/29/25","units":55,"event":"","asp":15.99,"total":520,"index":5},
    {"date":"3/2/25","units":55,"event":"","asp":15.99,"total":575,"index":6},
];
...
<VictoryChart width={800} height={400} >
    <VictoryLine
        data={smallData}
        x="date"
        y="total"
    />
    <VictoryBar
        data={smallData}
        x={(d) => d.event ? d.date : ''}
        y={(d) => d.event ? 575 : ''}
        style={{ data: {fill: '#F7F6F8', borderRadius: 0}}}
        cornerRadius={0}
    />
    <VictoryAxis dependentAxis label="Y axis - Units" data={smallData} y="total"/>
    <VictoryAxis label="X axis - Date" data={smallData} x={'date'}/>
</VictoryChart>

Expected behavior

Expect chart order to not affect axis

Actual behavior

Chart order affects axis in a way that causes the data to render incorrectly

Environment

• Device: desktop
• OS:Mac
• Browser: Chrome

[andy-root]

Light bulb, I just figured it out. The bar chart x is set to date while the y sets the height to 0 or the height constant, 575

<VictoryChart width={800} height={400} >
    <VictoryBar
        data={smallData}
        x={'date'}
        y={(d) => d.event ? 575 : 0}
        style={{ data: {fill: '#F7F6F8', borderRadius: 0}}}
        cornerRadius={0}
    />
    <VictoryLine
        data={smallData}
        x="date"
        y="total"
    />
    <VictoryAxis dependentAxis label="Y axis - Units" data={smallData} y="total"/>
    <VictoryAxis label="X axis - Date" data={smallData} x={'date'}/>
</VictoryChart>