1

I'm trying to integrate Victory charts to my RoR application using Shakapacker and React On Rails gem.

I've got the hello world example working, but when I use the code from Victory, I get the following error:

import PropTypes from 'prop-types';
import React, { useState } from 'react';
import style from './HelloWorld.module.css';


import { VictoryBar, VictoryChart, VictoryAxis, VictoryTheme, VictoryStack } from 'victory';



const HelloWorld = (props) => {


    const v_data = [
        {quarter: 1, earnings: 13000},
        {quarter: 2, earnings: 16500},
        {quarter: 3, earnings: 14250},
        {quarter: 4, earnings: 19000}
    ];


    return (
        <><div>
                <h1>Victory Tutorial {props.data}</h1>
                <VictoryChart
                    domainPadding={10}
                    theme={VictoryTheme.material}
                >
                    <VictoryAxis
                        tickValues={["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"]} />
                    <VictoryAxis
                        dependentAxis
                        tickFormat={(x) => (`$${x / 1000}k`)} />
                    <VictoryStack
                        colorScale={"warm"}
                    >
                        <VictoryBar
                            data={v_data}
                            x={"quarter"}
                            y={"earnings"} />
                    </VictoryStack>
                </VictoryChart>
            </div></>
    );
};

export default HelloWorld;

Error:

Uncaught Error: Objects are not valid as a React child (found: object with keys {label, value}). If you meant to render a collection of children, use an array instead.

It seems the error has to do with passing objects as a "react child"? But that's the expected syntax from the docs.

https://formidable.com/open-source/victory/docs/

What am I doing wrong? Please help. I've spent dozens of hours on this already.

mike
  • 1,526
  • 3
  • 17
  • 25

0 Answers0