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

483
Vistas
Loop datasets into chart.js?

How do I add both datasets to the chart looping the array? I have added one dataset but when trying to add a loop to add both datasets I cant figure out how to get it to work.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

<script>
const datasetValue = []

    datasetValue[0] = {
      data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
      borderColor: "red",
      fill: false
    }

    datasetValue[1] = {
      data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
      borderColor: "green",
      fill: false
    }

var xValues = [100,200,300,400,500,600,700,800,900,1000];

new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      data: datasetValue[0].data,
      borderColor: datasetValue[0].borderColor,
      fill: datasetValue[0].fill        
    }]
  },
  options: {
    legend: {display: false}
  }
});

</script>
about 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

just pass the datasetValues variable directly into the datasets field:

const datasetValue = []

datasetValue[0] = {
  data: [860, 1140, 1060, 1060, 1070, 1110, 1330, 2210, 7830, 2478],
  borderColor: "red",
  fill: false
}

datasetValue[1] = {
  data: [1600, 1700, 1700, 1900, 2000, 2700, 4000, 5000, 6000, 7000],
  borderColor: "green",
  fill: false
}

var xValues = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];

new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: datasetValue
  },
  options: {
    legend: {
      display: false
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<canvas id="myChart" style="width:100%;max-width:700px"></canvas>

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