How to display only one label in a multi line char?

Question

I create a diagram with chart.js. This diagram has two lines. So it displays also two labels by default. But I need a configuration where one for example the red label should appear and the blue one should be hidden. The label not the line!!

Thanks for your help

var config = {
  type: 'line',
  data: {
    labels: ['16:30', '17:30', '18:30', '19:30', '20:30'],
    datasets: [{
      label: 'High',
      backgroundColor: 'blue',
      borderColor: 'blue',
      data: [10.43, 10.42, 10.44, 10.43, 10.40],
      fill: false,
    }, {
      label: 'low',
      fill: false,
      backgroundColor: 'red',
      borderColor: 'red',
      data: [8.43, 8.5, 8.39, 8.38, 8.38],
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Test'
    },
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Time'
        }
      }],
      yAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Value'
        }
      }]
    }
  }
};
var ctx = $('#dia');
var myChart = new Chart(ctx, config);

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>


<canvas id="dia"></canvas>

Is it the legend you are referring to or the tooltips on the lines when you hover.. If legend then refer to https://stackoverflow.com/questions/57528694/chart-js-multiple-charts-with-one-common-legend — mkane, Jan 30 '20 at 12:51
I'm referring to the legend. The example in your link does not show both values. — InFlames82, Jan 31 '20 at 06:50
@InFlames82: So, for example, should the legend only contain "Heigh" and hide only the "Heigh" line when you click on it? Shall it not be possible at all to hide the "low" line? — uminder, Jan 31 '20 at 07:14

score 1 · Accepted Answer · answered Jan 31 '20 at 08:08

You can use legend.labels.generateLabels together with legend.onClick action to achieve this.

var config = {
    type: 'line',
    data: {
        labels: ['16:30', '17:30', '18:30', '19:30', '20:30'],
        datasets: [{
            label: 'High',
            backgroundColor: 'blue',
            borderColor: 'blue',
            data: [10.43, 10.42, 10.44, 10.43, 10.40],
            fill: false,
        }, {
            label: 'low',
            fill: false,
            backgroundColor: 'red',
            borderColor: 'red',
            data: [8.43, 8.5, 8.39, 8.38, 8.38],
        }]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: 'Test'
        },
        legend: {
            labels: {
                generateLabels: chart => {
                    let dataset = chart.data.datasets[0];
                    return [{                        
                        chart: chart,
                        text: dataset.label,
                        fillStyle: dataset.backgroundColor,
                        strokeStyle: dataset.borderColor,
                        hidden: chart.getDatasetMeta(0).hidden
                    }]
                }
            },
            onClick: (mouseEvent, legendItem) => {
              legendItem.chart.getDatasetMeta(0).hidden = !legendItem.hidden;
              legendItem.chart.update();
            }
        },
        tooltips: {
            mode: 'index',
            intersect: false,
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Time'
                }
            }],
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Value'
                }
            }]
        }
    }
};
var ctx = $('#dia');
new Chart(ctx, config);

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="dia"></canvas>

How to display only one label in a multi line char?

1 Answers1

Linked