charts - new - En Chart.js establece el título del gráfico, el nombre del eje x y el eje y?

new chart

Question

¿Chart.js ( documentation ) tiene una opción para que los conjuntos de datos establezcan el nombre (título) del gráfico (por ejemplo, Temperatura en mi ciudad), el nombre del eje x (por ejemplo, Días) y el nombre del eje y (por ejemplo, Temperatura). ¿O debería resolver esto con css?

var lineChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.2)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(220,220,220,1)",
            data : [data]
        }
    ]

}

Realmente gracias por la ayuda.

Answer 1

En la versión 2.0 de Chart.js, es posible establecer etiquetas para los ejes:

options = {
  scales: {
    yAxes: [{
      scaleLabel: {
        display: true,
        labelString: ''probability''
      }
    }]
  }     
}

Ver la documentación de etiquetado para más detalles.

Answer 2

Si ya ha establecido etiquetas para su eje, como mencionaron @andyhasit y @Marcus, y desea cambiarlas más adelante, puede intentar esto:

chart.options.scales.yAxes[ 0 ].scaleLabel.labelString = "New Label";

Configuración completa para referencia:

var chartConfig = {
    type: ''line'',
    data: {
      datasets: [ {
        label: ''DefaultLabel'',
        backgroundColor: ''#ff0000'',
        borderColor: ''#ff0000'',
        fill: false,
        data: [],
      } ]
    },
    options: {
      responsive: true,
      scales: {
        xAxes: [ {
          type: ''time'',
          display: true,
          scaleLabel: {
            display: true,
            labelString: ''Date''
          },
          ticks: {
            major: {
              fontStyle: ''bold'',
              fontColor: ''#FF0000''
            }
          }
        } ],
        yAxes: [ {
          display: true,
          scaleLabel: {
            display: true,
            labelString: ''value''
          }
        } ]
      }
    }
  };

Answer 3

solo usa esto:

<script>
  var ctx = document.getElementById("myChart").getContext(''2d'');
  var myChart = new Chart(ctx, {
    type: ''bar'',
    data: {
      labels: ["1","2","3","4","5","6","7","8","9","10","11",],
      datasets: [{
        label: ''YOUR LABEL'',
        backgroundColor: [
          "#566573"
          "#99a3a4",
          "#dc7633",
          "#f5b041",
          "#f7dc6f",
          "#82e0aa",
          "#73c6b6",
          "#5dade2",
          "#a569bd",
          "#ec7063",
          "#a5754a"
        ],
        data: [12, 19, 3, 17, 28, 24, 7, 2,4,14,6],            
      },]
    },
    //HERE COMES THE AXIS Y LABEL
    options : {
      scales: {
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: ''probability''
          }
        }]
      }
    }
  });
</script>