[Chartjs]-How to display only one label in a multi line char?

by

1👍

✅

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>

Leave a comment