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

96
Vistas
Adding different point style to each column from parsed csv in chart.js

I'm trying to use the parsed csv to specify a pointStyle color for each column dataset. Right now this will cause alternating colors of points on the line chart. Would splitting out the 'borderColor:' into three if statements of "i equal to the column number" work? Not sure how this would be written.

var data = Papa.parse(csvString).data;
    var timeLabels = data.slice(1).map(function(row) { return row[0]; }); // data in that column

    var datasets = [];
    for (var i = 1; i < data[0].length; i++) {
      datasets.push(
        {
          label: data[0][i], // column name
          data: data.slice(1).map(function(row) {return row[i]}), // data in that column
          fill: false, // `true` for area charts, `false` for regular line charts
          borderColor: ["#3e95cd","#8e5ea2","#c45850"],
          borderWidth: "2",
          pointRadius: '0',
          pointStyle: "rectRot"
        }
      )
    }
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

You are now telling each dataset that the colors it has to use is an array of 3 collors so it will do so, like you said if you only want one color you just need to pass that one collor like so:

var datasets = [];
const colors = ["#3e95cd", "#8e5ea2", "#c45850"];

for (var i = 1; i < data[0].length; i++) {
  datasets.push({
    label: data[0][i], // column name
    data: data.slice(1).map(function(row) {
      return row[i]
    }), // data in that column
    fill: false, // `true` for area charts, `false` for regular line charts
    borderColor: colors[i],
    borderWidth: "2",
    pointRadius: '0',
    pointStyle: "rectRot"
  })
}
about 4 years ago · Juan Pablo Isaza 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