FastPanda
Posts: 3
Joined: Fri Dec 02, 2022 3:14 pm

Render JSON API data in charts

Hi,

For a school project I need to display data in a react frontend using charts. I chose to use Highcharts since I found it easy to use and it also had some really nice functions (animations, good looking charts etc.). The data I need to display in the graphs is stored in a database which is send to the React frontend using a Java REST API. I can print the data fine in React, however I am having problems displaying it in the charts. Could anyone help me out? Thanks!
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Render JSON API data in charts

Hi,

Welcome to our forum and thanks for contacting us with your question!

I'm glad you like our library!

In order to display the data in the chart, you need to parse it properly and insert it in the appropriate place in the state of the chart options.

Unfortunately, I'm not able to tell you exactly how to do this for your case, because I don't know the structure of your data. However, I have prepared a simple demo for you below in which you can see how you can download data from a random API, parse it and insert it into the chart.

Demo: https://codesandbox.io/s/highcharts-loa ... =/demo.jsx

Let me know if you have any further questions!
Best regards!
Dawid Draguła
Highcharts Developer
FastPanda
Posts: 3
Joined: Fri Dec 02, 2022 3:14 pm

Re: Render JSON API data in charts

Thank you, it worked for me. I first used Axios but changing to fetch worked. By the way, could I also do it with a react function instead of a class extended by react.component?
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Render JSON API data in charts

Hi,

Yes, it can be a react function. Nothing changes in the Highcharts itself, only a change in how code is realised in react.
Demo: https://codesandbox.io/s/highcharts-loa ... =/demo.jsx

I hope you will find it useful
Regards!
Dawid Draguła
Highcharts Developer
FastPanda
Posts: 3
Joined: Fri Dec 02, 2022 3:14 pm

Re: Render JSON API data in charts

This was exactly what I was looking for. Thank you so much!
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Render JSON API data in charts

You're welcome! In case of any further questions, feel free to contact us again.
Regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Usage”