React Apex Chart Data, Image and API

Question

How to modify series and options, i want to make chart type=treemap on react hooks like this

i have name, user and percent on api.

  {
    "data": [
        {
            "id": "1",
            "name": "Pisces",
            "user": "95",
            "percent": "3.15%",
        },
        {
            "id": "2",
            "name": "Leo",
            "user": "50",
            "percent": "2.35%",
        },
        {
            "id": "3",
            "name": "Capricorn",
            "user": "91",
            "percent": "3.12%",
        }
        ]
    }

and source for apex https://apexcharts.com/docs/chart-types/treemap-chart/

import React, { useState,useEffect } from 'react';
import axios from 'axios';
import './App.css';
import Chart from 'react-apexcharts'
import icUser from './image/profile-user.png'
import icChart from './image/pie-chart.png'

const  App =()=> {
  const [dataUser,setDataUser]=useState([])
  useEffect(() => {    
     axios.get("http://localhost:4000/data")
      .then(response =>{
          setDataUser(response.data)
      }).catch(e => {
          alert(e);
      })
  }, [])
  
 const series = {.....}
 const options = {.....}

 return (
     <div>
     <Chart options={options} series={series} height={350} type="treemap"/>
     </div>
    )
}
export default App

Can you explain more... about your question !

Mayur Vaghasiya
– Mayur Vaghasiya

2021-12-30 06:26:02 +00:00
Commented Dec 30, 2021 at 6:26 — Mayur Vaghasiya
– Mayur Vaghasiya, Commented Dec 30, 2021 at 6:26

Codder · Accepted Answer · 2021-12-30 07:00:52Z

1

In series you need to pass an array like this, Where x is the name, and y percentage. and In option you can modify the treemap chart like change height, type, plotOptions and more...

const App = () => {
  const [dataUser, setDataUser] = useState([])
  useEffect(() => {
    axios.get("http://localhost:4000/data")
      .then(response => {
        setDataUser(response.data)
      }).catch(e => {
        alert(e);
      })
  }, [])

  const seriesData = [];
  const options = {}

  dataUser.map((val) => {
    seriesData.push(
      {
        x: val.name,   //
        y: val.percent  //
      }
    );
  });

  const series = [{ data: seriesData }];
  return (
    <div>
      <Chart options={options} series={series} height={350} type="treemap" />
    </div>
  )
}
export default App

edited Dec 30, 2021 at 7:00

answered Dec 30, 2021 at 6:36

Codder

235 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ivanichi Over a year ago

how we can put the data from API on series, i have name, user and percent on API

Codder Over a year ago

I update my answer, you need to put your data in array pls check

ivanichi Over a year ago

thanks, now i can show the name, but not yet for user and percent like the picture above

Codder Over a year ago

You can show user or percentage in Y

Codder Over a year ago

you can pass only two parameter in data array x and y !

|

Collectives™ on Stack Overflow

React Apex Chart Data, Image and API

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related