Axis Styling lost on data load

[skavan]

First off, incredible Library. Thank you.
Have a hit a snag, that is probably user error. Code at the bottom of this message.

I have a line chart, with a VictoryZoomContainer. In its default state, all seems to be working.

But I want to style the axis. So I drop a couple of <VictoryAxis /> components in. One for each axis.

If I provide no data to the chart:
<VictoryLine data={[]} />
then all my formatting works great. Of course, with no data.

But when I actually set the data to a datasource, as soon as it loads the data it wipes away some of the VictoryAxis settings.
Strangely, not all settings are lost. But, for example, y axis location (orientation='right') and y-axis gridlines.
Even then, the y-axis labels and ticks are formatted as 'right', but located on the left!

CORRECT STYLING (NO DATA), data = {[]}:

BROKEN STYLING (DATA PROVIDED) data = {dummyData.readingHistory}:

I suspect I'm not understanding how to use the <VictoryAxis /> or one of the other components. Hoping someone can fix me!

p.s. For others who have been trying to figure out how to perfectly size the VictoryChart to its parent container, see the relevant code below, using 'use-resize-observer'. Link is in the code. Works a treat.

Full code:

import React, { useState } from "react";
import { connect } from "react-redux";
import { mapStateToProps } from "../mapStateToProps";
import { VictoryChart, VictoryZoomContainer, VictoryAxis, VictoryLine, VictoryTheme } from "victory";
import { ThrottledObserver } from "../../../utilities/uiUtilities";
import dummyData from "./DummyData";
// https://github.com/ZeeCoder/use-resize-observer

const ConnectedLineChart = (props) => {
  const { ref: ref1, width: width1, height: height1 } = ThrottledObserver(200);

  let first = new Date();
  first.setHours(first.getHours() - 12);

  const [zoomDomain, setZoomDomain] = useState({ x: [first, new Date()] });

  const handleZoom = (domain) => {
    setZoomDomain(domain);
  };

  return (
    <div ref={ref1} style={{ maxWidth: "100%", maxHeight: "100%", display: "grid", overflow: "hidden" }}>
      <VictoryChart
        // style={{flexGrow: 1}}
        width={width1}
        height={height1}
        padding={{ top: 30, left: 40, right: 32, bottom: 50 }}
        theme={VictoryTheme.material}
        scale={{ x: "time" }}
        containerComponent={<VictoryZoomContainer zoomDimension="x" zoomDomain={zoomDomain} onZoomDomainChange={handleZoom} responsive={false}></VictoryZoomContainer>}
      >
        <VictoryAxis
          dependentAxis={true}
          orientation="right"
          style={{
            axis: { stroke: "transparent" },
            axisLabel: { fontSize: 20, padding: 30, stroke: "white", fill: "white" },
            grid: { stroke: "grey", strokeOpacity: "0.5", strokeWidth: 1, strokeDasharray: "none" },
            ticks: { stroke: "grey", size: 5 },
            tickLabels: { fontSize: 10, padding: 5, fill: "white" },
          }}
        />
        <VictoryAxis
          style={{
            axis: { stroke: "grey", strokeWidth: 1 },
            axisLabel: { fontSize: 20, padding: 30, stroke: "white", fill: "white" },
            grid: { stroke: "grey", strokeOpacity: "0.5", strokeWidth: 1, strokeDasharray: "none" },
            ticks: { stroke: "grey", size: 5 },
            tickLabels: { fontSize: 10, padding: 5, fill: "white" },
          }}
        />
        <VictoryLine
          style={{
            data: { stroke: "#c43a31" },
            // parent: { border: "1px solid #ccc" },
          }}
          data={dummyData.readingHistory}
          x={(datum) => new Date(datum.timeStamp)}
          y="sgv"
        />
      </VictoryChart>
    </div>
  );
};

const LineChart = connect(mapStateToProps)(ConnectedLineChart);

export default LineChart;

[boygirl]

@skavan apologies for the delay. I think this issue here is not actually the styling, but the axis offset not being calculated correctly when the domain changes. I think it's related to this issue: #1717

We're looking into these next. Thanks for your patience.

[jhumbug]

@skavan Are you able to supply your dummyData.readingHistory so I can fully recreate your example when your data is present?