DEV Community

Cover image for I developed an Interactive Dashboard with NextJS and HighChartsJS
Joseph Mukorivo
Joseph Mukorivo

Posted on • Updated on

I developed an Interactive Dashboard with NextJS and HighChartsJS

In April 2021 I had a task of creating an African citizenship index for the organisation I was working for. Data on this Index was collected from surveys that were conducted across multiple countries.

We needed a way to present this data on a dashboard online so I developed this Dashboard.

To develop this dashboard I used NextJS, styled-components, Strapi and Highcharts.

For the file structure and project layout I used the layout below but you can get more information about that from my article here How I structure my NextJS projects.

📦src
┣ 📂charts
┃ ┣ 📜index.js
┃ ┗ 📜sunburst.js
┣ 📂components
┃ ┣ 📂breadcrumb
┃ ┃ ┣ 📂styles
┃ ┃ ┃ ┗ 📜breadcrumb.js
┃ ┃ ┗ 📜index.js
┃ ┗ 📜index.js
┣ 📂containers
┃ ┣ 📜index.js
┃ ┗ 📜navbar.js
┣ 📂fixtures
┃ ┗ 📜data.json
┣ 📂lib
┃ ┗ 📜gtag.js
┣ 📂pages
┣ 📂public
┃ ┣ 📂fonts
┃ ┃ ┗ 📂Arial
┃ ┣ 📂icons
┃ ┣ 📂images
┃ ┃ ┣ 📂svg
┃ ┣ 📂videos
┃ ┣ 📜manifest.json
┃ ┣ 📜sitemap.xml
┃ ┗ 📜sw.js
┣ 📂scripts
┃ ┗ 📜generate-sitemap.js
┣ 📂styles
┣ 📂utils
┣ 📜.env
┗ 📜next.config.js

I used Google lighthouse to check the perfomance of the website and these were the results.

Lighthouse results

To get more react and JavaScript tips you can follow me on twitter.

Discussion (3)

Collapse
bevilaquabruno profile image
Bruno Fernando Bevilaqua

Nice work!

But do you know any other lib to recommend besides HighChartJs?

Collapse
josemukorivo profile image
Joseph Mukorivo Author

try these ones blog.logrocket.com/top-5-react-cha... but if you are doing something complex you can use something like d3.js

Collapse
bevilaquabruno profile image
Bruno Fernando Bevilaqua

Thank you! I will test your recommendation