CODEWITHSUNDEEP
arraysreactjsreact-hooksapexcharts
ivanichi
ivanichi

Reputation: 49

React Apex Chart Data, Image and API

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

enter image description here

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

Upvotes: 1

Views: 1443

Answers (1)

Codder
Codder

Reputation: 23

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

Upvotes: 1

Related Questions