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.