Victory: Add a `containerRef` prop for those who need a reference to the rendered chart

Created on 5 Oct 2017 · 7Comments · Source: FormidableLabs/victory

Supports exporting to pdf etc.

Implementation:

A prop on VictoryContainer (and all the containers that extend it) called containerRef takes a function. The ref will be applied to the outermost element that Victory renders.

Usage:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.logContainerRef = this.logContainerRef.bind(this);
  }

  componentDidMount() {
    this.logContainerRef();
  }

  logContainerRef() {
    console.log(this.containerRef);
  };

  render() {
    return (
      <VictoryBar
         containerComponent={
            <VictoryContainer containerRef={(ref) => { this.containerRef = ref; }}/>
         }
     />
   );
 }
}

Source

boygirl

🎉1

All 7 comments

@esutton

I expect this change to be released in main victory this week, but not in victory-native until some time next week.

boygirl on 5 Oct 2017

❤1

@boygirl Thank you so much!

esutton on 5 Oct 2017

released in [email protected]. Look for this in the next victory native release as well. ~ next week

boygirl on 6 Oct 2017

Thank you.

I have not tried it yet but I assume this should work with the new containerRef exposed:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.logContainerRef = this.logContainerRef.bind(this);
  }

  componentDidMount() {
    this.logContainerRef();
  }

  logContainerRef() {
    console.log(this.containerRef);
  }

  render() {
    return (
      <VictoryBar
        containerComponent={
          <VictoryContainer containerRef={(ref) => {
            this.containerRef = ref;

            setTimeout(() => {
              this.containerRef.svgRef.toDataURL((base64) => {
                console.log(base64);
              });
            }, 500);
          }}
          />
        }
      />
    );
  }
}

esutton on 6 Oct 2017

@boygirl @esutton I have tried your exact example above and I get the following error: Uncaught TypeError: Cannot read property 'toDataURL' of undefined at setTimeout

I have tried for quite some time to understand the issue, but without any luck. Do you know what could be the issue?