2 votes

Chart Js , multiple lines in a label

Request

  • To be able to insert two lines in a label, that is to say that when you press "HERE TWO LINES" the two lines that you assign are activated or deactivated.

Image: introducir la descripción de la imagen aquí

Expected introducir la descripción de la imagen aquí

https://jsfiddle.net/palaceslittle/sehf31cy/

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [
        {
            label: 'AQUI DOS LINEAS',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor:'rgba(255, 99, 132, 0.2)',    
            borderWidth: 1
        },
            {
            label: 'Xxxx',
            data: [22, 29, 33, 55, 52, 33],
            backgroundColor:'rgba(255, 99, 132, 0.2)',    
            borderWidth: 1
        }
        ]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
<canvas id="myChart" width="1500" height="290"></canvas>

3voto

Alvaro Montoro Points 38554

In ChartJS you can define your own labels and the behavior they are going to have. What you have to do is in the configuration options, for the legends ( legend ), define how many labels there are going to be (in your case only one with the text "HERE TWO LINES") and the actions that are going to occur when they are pressed (with onClick ).

Here you can see how the commented code would look like:

....
options: {
    ....
    // aquí va la configuración de las leyendas
    legend: {
      // aquí los datos de los labels
      labels: {
        // generamos un único label del color que quieres
        generateLabels: function(chart) {
          return [{
            text: 'AQUI DOS LINEAS',
            fillStyle: 'rgba(255, 99, 132, 0.2)'
          }]
        }
      },
      // aquí definimos el comportamiento que ocurrirá cuando se pulse la leyenda
      onClick: function(e, legendItem) {
        var ci = this.chart;
        // para cad una de las líneas de datos
        ci.data.datasets.forEach(function(e, i) {
          var meta = ci.getDatasetMeta(i);
          // si están visibles las escondemos y viceversa
          if (meta.hidden == true) {
            meta.hidden = false;
          } else {
            meta.hidden = true;
          }
        });
        // redibujamos la gráfica
        ci.update();
      }
    }
    ....
  }
....

And here is a small demo based on your code:

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: 'AQUI DOS LINEAS',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderWidth: 1,
        hidden: true
      },
      {
        label: 'Xxxx',
        data: [22, 29, 33, 55, 52, 33],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderWidth: 1,
        hidden: true
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    },
    legend: {
      labels: {
        generateLabels: function(chart) {
          return [{
            text: 'AQUI DOS LINEAS',
            fillStyle: 'rgba(255, 99, 132, 0.2)'
          }]
        }
      },
      onClick: function(e, legendItem) {
        var ci = this.chart;
        ci.data.datasets.forEach(function(e, i) {
          var meta = ci.getDatasetMeta(i);
          if (meta.hidden == false) {
            meta.hidden = true;
          } else {
            meta.hidden = false;
          }
        })
        ci.update();
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
<canvas id="myChart" width="1500" height="290"></canvas>

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X