How to make legend.display as false for a particular dataset in chart js-CodePudding

 var myBarChart = new Chart('myChart', {
  type: 'bar',
  data: {
    labels: ["Single Drive Mode", "Dual Drive Mode"],
    datasets: [
      {
        type: 'bar',
        label: "Recordings",
        backgroundColor: ["rgba(2,117,216,0.2)","rgba(75, 192, 192, 0.2)"],//"rgb(137,207,240)",////"rgba(2,117,216,1)",
        borderColor: ["rgba(2,117,216,1)","rgba(75, 192, 192, 1)"],//"rgb(137,207,240)",////"rgba(2,117,216,1)",
        data: [this.data.singledrivemode,this.data.dualdrivemode],
        order: 2,
        borderWidth: 2,
        barPercentage:0.4
      },
      {
        type: 'line',
        data: [this.data.totalrecordings, this.data.totalrecordings],
        label: 'Total Recordings',
        backgroundColor: "rgba(2,117,216,1)",//"rgba(2,117,216,0.2)",//"rgba(150,29,255,1)",
        borderColor: "rgba(2,117,216,1)",//"rgba(2,117,216,0.2)",//"rgba(150,29,255,1)",
        pointRadius: 3,
        pointHoverRadius: 4,
        order: 1,
        xAxisID: 'xAxis2'
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          title: (ttItems) => (ttItems[0].dataset.type === 'line' ? '' : ttItems[0].label),
        }
      }
    },
    scales: {
      xAxis: {
        ticks: {
          maxTicksLimit: 6
        }
      },
      yAxis: {
        ticks: {
          maxTicksLimit: 5
        }
      },
      xAxis2: {
        display: false,
        offset: false,
        ticks: {
          display: false

        },
        // labels:[" "," "," "," "," "]
      }
    }
  }
});

I don't want to display bar chart label i.e. "Recordings" but for the line chart I want to display the label i.e. 'Total Recordings'

I tried using options:{ legend:{ display:false } }

but that makes both bar chart and line chart label disappear

CodePudding user response：

You can use the filter callback to filter out the legend items you dont want to show:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1,
      }
    ]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          filter: (l) => (l.text !== '# of Points')
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
</body>

CodePudding user response：

IIRC you should be able to specify options on dataset level, i.e. you should be able to define legend: {display: false} in one of the datasets directly:

...
      {
        type: 'bar',
        label: "Recordings",
        backgroundColor: ["rgba(2,117,216,0.2)","rgba(75, 192, 192, 0.2)"],//"rgb(137,207,240)",////"rgba(2,117,216,1)",
        borderColor: ["rgba(2,117,216,1)","rgba(75, 192, 192, 1)"],//"rgb(137,207,240)",////"rgba(2,117,216,1)",
        data: [this.data.singledrivemode,this.data.dualdrivemode],
        order: 2,
        borderWidth: 2,
        barPercentage:0.4,
        legend: {display: false}
      },
...