Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

205
Vistas
Chart line isnt shows up

im working right now on a project of cryptocurrency , that shows a line graph of a coin for a whole year , im using react as my frontend and nodejs as my backend.

i cant tell where the problem is , i have mapped the info of everyday date and price of the coin (btc) , and im trying to show it as a line , and it doesnt show up the info after i mapped it looks like that -

the dates - dates

the prices - prices

also the graph in the site looks like this - graph

App.js

function App() {
  var [details, setDetails] = useState();
  var [details2,setDetails2] = useState();
  var o = [] // empty Object
  var price=0;
  var date="";
  var i=1;
var array="";
var years;
var prices1;
  useEffect(()=>
  {
    
    Axios.get('http://localhost:3002/bitcoin').then((response,ans)=>
    {
      
    
      var array1=response.data.split("space");
      array1.pop();
      array1.forEach(function(value)
      {
        console.log(value);
        date=value.split(":")[0];
        price=parseFloat(value.split(":")[1]);
        o.push({date,price});
        i++;
      });
      years = o.map(value => value.date);
  prices1=o.map(value2=>value2.price);
    setDetails(years);
    setDetails2(prices1);
     
    })
    
    
  })
  console.log(details);
  console.log(details2);//trying to figure out in the site if the info is correct 
  
  
  
  const [userData, setUserData] = useState({
    labels: details,//supposed to show up the graph with the info , can only see the graph without no info
    datasets: [
      {
        label: "Price",
        data: details2,
        backgroundColor: [
          "rgba(75,192,192,1)",
        ],
        
        borderColor: "black",
        borderWidth: 2,
      },
    ],
  });
  return (
    <div className="App">
      <h1>fedgfdsgs</h1>
      <div style={{ width: 1500 }}>
        <LineChart chartData={userData} />
      </div>
</div>
    
  );
  
  
}

export default App;

LineChart.js

import React from "react";
import { Line } from "react-chartjs-2";


function LineChart({ chartData }) {
  return <Line data={chartData} />;
}

export default LineChart;

//edit not sure if this is a problem , but the first time im trying to console.log the variables details and details2 are undifined - undifined thanks for your time :)

about 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

You need to set your userData value in useEffect, like this:

function App() {
    var [details, setDetails] = useState();
    var [details2, setDetails2] = useState();
    var o = [] // empty Object
    var price = 0;
    var date = "";
    var i = 1;
    var array = "";
    var years;
    var prices1;
    useEffect(() => {
        Axios.get('http://localhost:3002/bitcoin').then((response, ans) => {
            var array1 = response.data.split("space");
            array1.pop();
            array1.forEach(function (value) {
                console.log(value);
                date = value.split(":")[0];
                price = parseFloat(value.split(":")[1]);
                o.push({ date, price });
                i++;
            });
            years = o.map(value => value.date);
            prices1 = o.map(value2 => value2.price);
            setDetails(years);
            setDetails2(prices1);
            setUserData({
                labels: years,
                datasets: [
                    {
                        label: "Price",
                        data: prices1,
                        backgroundColor: [
                            "rgba(75,192,192,1)",
                        ],
                        borderColor: "black",
                        borderWidth: 2,
                    },
                ],
            });
        })
    })
    console.log(details);
    console.log(details2);//trying to figure out in the site if the info is correct 
    const [userData, setUserData] = useState({});
    return (
        <div className="App">
            <h1>fedgfdsgs</h1>
            <div style={{ width: 1500 }}>
                <LineChart chartData={userData} />
            </div>
        </div>
    );
}
export default App;
about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda