As the title states, I am creating a full-stack dashboard where I do some Python data analysis and then visualization using Altair on the backend and then design the dashboard with React on the front-end. Obviously, I would like those same charts to display on the front-end.
Creating the chart and then passing the related JSON to the front-end is pretty straightforward. I simply define a route in Python and then create a function that returns the chart:
chart = altair.Chart(XXX)
chartJson = chart.to_json()
chartFile= json.dumps(chartJson)
On the front end, I use Axios to get the chart's JSON and then I save it by setting it as a variable within a useState hook. I can then access the variable and print it, without a problem. Even on the front-end, it appears to be properly designed as a JSON object.
const [chart, setChart] = useState("");
The issue is that when I try to render the chart using react-Vega using the following conditional render:
{chart ? "<"Vega spec={chart} /">" : ""}
I get the following error:
ERR_ABORTED 431 (Request Header Fields Too Large)
This doesn't make sense to me, since I have already passed over the chart's JSON file successfully to the front-end? When I examine the JSON, it looks OK. In fact, if I copy it exactly from my devtools console and paste it into a new front-end React component using the above Vega command, it renders just fine. So, it appears to be in the correct format.
I have tried using Fetch to access the JSON file, and still had the same error. I also tried json.stringify() on the file, but that also made no difference.
Has anyone else experienced this issue before, or can please help me with it? Thanks in advance,