1

tengo un script con un gráfico lineal el cual no sé como quitarle la leyenda y cambiarle los colores de los ejes y nombre de las series. Agradecería si me echaran un cable por favor.

document.addEventListener('DOMContentLoaded', function () {
    const ctx = document.getElementById('draw').getContext('2d');

  let monthHours = {
    mes1: horas_mes1,
    mes2: horas_mes2,
    mes3: horas_mes3,
    mes4: horas_mes4,
    mes5: horas_mes5
  };
  let monthMinutes = {
    mes1: min_mes1,
    mes2: min_mes2,
    mes3: min_mes3,
    mes4: min_mes4,
    mes5: min_mes5
  };
  const totalHours = [];

  for (let key in monthHours) {
    const val = monthHours[key] / 1;
    const minute = monthMinutes[key];
    totalHours.push(val + (minute / 100));
  }

  const labels = [mes1letra,mes2letra,mes3letra,mes4letra,mes5letra];
  const datasets = [
    {
      label: 'Horas de clases',
      backgroundColor: 'rgba(0, 150, 255, .13)',
      borderColor: 'rgba(255, 255, 255, .35)',
      pointColor: '#fff',
      pointBorderColor: 'rgba(0, 150, 255, .55)',
      pointBackgroundColor: '#fff',
      data: totalHours
    }
  ];
  const options = {
    tooltips: {
      callbacks: {
        label: function (tooltip, data) {
          const index = tooltip.index;
          let hours = data.datasets[0].data[index];
          let minutes = (hours % 1).toFixed(2);
          hours = parseInt(hours);
          minutes = minutes.substring(minutes.indexOf('.') + 1);
          return `${hours} hours y ${minutes} minutes`;
        }
      }
    }
  };

  new Chart.Line(ctx, {
    data: { labels, datasets },
    options
  });
});
2
  • Pues evidentemente sí que lo he hecho pero no se donde ubicar en mi código esos valores. Ahorrate esos comentarios si no sabes lo que previamente he hecho.
    – Vieira
    el 11 ene. 2017 a las 17:34
  • @Marcos Gallardo, los datos que he querido modificar se refieren a la curva que dibuja la gráfica no la de los ejes... lo que no sé es donde ponder la configuración de los ejes...
    – Vieira
    el 11 ene. 2017 a las 17:38

1 respuesta 1

1

Como en tu pregunta el código que publicas esta incompleto (ej: horas_mes1 es undefied) he creado otro gráfico para ejemplificar como hacer lo que necesitas.

  • Para modificar el color de los ejes, debes hacerlo a través de la prop color de Grid Lines

    options: {
      scales: {
        xAxes: [{
          gridLines:{
            color:"rgba(0,255,0,1)" // <-- Color eje X
    
  • Para desactivar las legendas debes hacerlo a través de la propiedad display de Legend

    options: {
      legend: {
        display: false // <-- Ocultar legends
    
  • Para modificar el nombre de la series, necesito saber cual y que necesitas que diga.

  • Para modificar el color de los labels del eje X, debes hacerlo a través de la propiedad fontColor de Ticks

    options: {
      scales: {
        xAxes: [{
          ticks:{
            fontColor:"orange" // <-- Color de labels eje X
    

Demo:

window.addEventListener('load', function() {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    datasets: [{
      label: 'apples',
      data: [12, 19, 3, 17, 6, 3, 7],
      backgroundColor: "rgba(153,255,51,0.6)"
    }, {
      label: 'oranges',
      data: [2, 29, 5, 5, 2, 3, 10],
      backgroundColor: "rgba(255,153,0,0.6)"
    }]
  },
  options: {
    legend: {
      display: false // Ocultar legendas
    },
    scales: {
      xAxes: [{
        gridLines:{
          color:"rgba(0,255,0,1)",// Eje x color verde
          display: false
        },
        ticks: {
          fontColor: "orange" // Cambiar color de labels
        }
      }],
      yAxes: [{
        gridLines:{
          color:"rgba(255,0,0,1)", // Eje y color rojo
          display: false,
        }
      }]
    }
  }
});
});
.container {
  width: 80%;
  margin: 15px auto;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.js"></script>
<div class="container">
  <div>
    <canvas id="myChart"></canvas>
  </div>
</div>

3
  • Marcos funciona a la perfección... muchísimas gracias por el código.
    – Vieira
    el 11 ene. 2017 a las 18:23
  • Una última pregunta por favor, sabrías decirme también para cambiar el color de las letras 'M', 'T', 'W', 'T', 'F', 'S', 'S'?
    – Vieira
    el 11 ene. 2017 a las 18:33
  • @Vieira, he actualizado mi respuesta incluyendo la nueva configuración
    – Marcos
    el 11 ene. 2017 a las 18:41

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.