Chart Js, multiple lines in a label [closed]

Question

Chart Js, multiple lines in a label [closed]

Navigation

#1 by (3 votes)

2

Requirement

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

Image:

Expected

link

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>

javascript chart.js

asked by nawelittle 09.06.2017 в 14:27

source

1 answer

Problem filling vector How can I make a table perform the functions of deleting and modifying? Without having to make 2 independent tables

score 3 · Accepted Answer

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

Here you can see what 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 I put 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>