Hide first label in legend in a Chart using chart.js

问题

I have created a stacked bar chart and i have to hide first dataset's label and its box in legend which is "Total Line", Is there anyway to hide first or any dataset's label. i have read the documentation there is a filter in options but it didn't work.
Hiding This label
Here is the html and js for chart

var ctx = document.getElementById("girth-measure-chart");
var totalLine = [115, 118, 88, 93, 103, 118, 125]
var total = [112, 115, 85, 90, 100, 115, 122]
var arms = [46, 55, 41, 41, 47, 54, 57]
var neck = [17, 20, 15, 15, 17, 20, 21]
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
        datasets: [{
                type: 'line',
                label: 'Total Line',
                data: totalLine,
                fill: false,
                borderColor: ["#ff7899"],
                legend: false,
                pointBackgroundColor: "#ff151f",
                pointRadius: 8,
                pointHoverRadius: 8,
                pointHoverBackgroundColor: "#990e14",
                pointHoverBorderColor: "#6754d3"

            }, {
                type: 'bar',
                label: 'Neck',
                data: neck,
                backgroundColor: "#e99449",
                hoverBackgroundColor: "#d36d14"
            }, {
                type: 'bar',
                label: 'Arms',
                data: arms,
                backgroundColor: "#49bae9",
                hoverBackgroundColor: "#0789bf"
            }, {
                type: 'bar',
                label: 'Total',
                data: total,
                backgroundColor: "#6754d3",
                hoverBackgroundColor: "#260cbd"
            }

        ]
    },
    options: {

        legend: {
            display: true,
            labels: {
                display: true,
                boxWidth: 12,


            }
        },
        responsive: true,
        scales: {
            xAxes: [{
                stacked: true,
                gridLines: {
                    display: false
                },
                barThickness: 25,
                ticks: {
                    display: true,
                    fontFamily: "Montserrat",
                    fontColor: "#2c405a",
                    fontSize: 12
                }
            }],
            yAxes: [{
                gridLines: {
                    display: false
                },
                ticks: {
                    display: false,
                    stepSize: 10,
                    min: 0,
                    max: 150,
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<div class="chart-container">
    <div class="girth-measure-chart-inner" style="width: 100%;">
        <canvas id="girth-measure-chart" height=""></canvas>
    </div>
</div>

回答1:

Use the filter method under options.

options: {
  legend: {
    labels: {
      filter: function(legendItem, chartData) {

        // return true or false based on legendItem's datasetIndex (legendItem.datasetIndex)
      }
    }
  }
}

In your case return false for the first index and true for the rest.

var ctx = document.getElementById("girth-measure-chart");
var totalLine = [115, 118, 88, 93, 103, 118, 125]
var total = [112, 115, 85, 90, 100, 115, 122]
var arms = [46, 55, 41, 41, 47, 54, 57]
var neck = [17, 20, 15, 15, 17, 20, 21]
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],
        datasets: [{
                type: 'line',
                label: 'Total Line',
                data: totalLine,
                fill: false,
                borderColor: ["#ff7899"],
                legend: false,
                pointBackgroundColor: "#ff151f",
                pointRadius: 8,
                pointHoverRadius: 8,
                pointHoverBackgroundColor: "#990e14",
                pointHoverBorderColor: "#6754d3"

            }, {
                type: 'bar',
                label: 'Neck',
                data: neck,
                backgroundColor: "#e99449",
                hoverBackgroundColor: "#d36d14"
            }, {
                type: 'bar',
                label: 'Arms',
                data: arms,
                backgroundColor: "#49bae9",
                hoverBackgroundColor: "#0789bf"
            }, {
                type: 'bar',
                label: 'Total',
                data: total,
                backgroundColor: "#6754d3",
                hoverBackgroundColor: "#260cbd"
            }

        ]
    },
    options: {
        legend: {
           labels: {
               filter: function(legendItem, chartData) {
                if (legendItem.datasetIndex === 0) {
                  return false;
                }
               return true;
               }
            }
        },
        responsive: true,
        scales: {
            xAxes: [{
                stacked: true,
                gridLines: {
                    display: false
                },
                barThickness: 25,
                ticks: {
                    display: true,
                    fontFamily: "Montserrat",
                    fontColor: "#2c405a",
                    fontSize: 12
                }
            }],
            yAxes: [{
                gridLines: {
                    display: false
                },
                ticks: {
                    display: false,
                    stepSize: 10,
                    min: 0,
                    max: 150,
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<div class="chart-container">
    <div class="girth-measure-chart-inner" style="width: 100%;">
        <canvas id="girth-measure-chart" height=""></canvas>
    </div>
</div>

来源：https://stackoverflow.com/questions/47080918/hide-first-label-in-legend-in-a-chart-using-chart-js