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

user_18907345 0
Viewed 49
 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

chart.js angular linechart bar-chart
2 Answers

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>

user_86829830

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}
      },
...
user_13473490
Related