score:323

Accepted answer

just set the label and tooltip options like so

...
options: {
    legend: {
        display: false
    },
    tooltips: {
        callbacks: {
           label: function(tooltipitem) {
                  return tooltipitem.ylabel;
           }
        }
    }
}

fiddle - http://jsfiddle.net/g19220r6/

score:2

replace options with this snippet, will fix for vanilla javascript developers

options: {
            title: {
                text: 'hello',
                display: true
            },
            scales: {
                xaxes: [{
                    ticks: {
                        display: false
                    }
                }]
            },
            legend: {
                display: false
            }
        }

score:7

new chart('idname', {
      type: 'typechar',
      data: data,
      options: {
        legend: {
          display: false
        }
      }
    });

score:8

for those who want to remove the actual axis labels and not just the legend in 2021 (chart.js v.3.5.1). note: this also removes the axes.

const chartwrap = document.queryselector('.chart-wrap')
const canvas = document.createelement('canvas')

chartwrap.appendchild(canvas)
const ctx = canvas.getcontext('2d')

const mychart = new chart(ctx, {
    type: 'line',
    data: {
        labels: ['your', 'axis', 'labels'],
        datasets: [
            {
                label: 'your legend label',
                data: [1, 3, 2],
                backgroundcolor: '#54acef'
            }
        ]
    },
    options: {
        maintainaspectratio: false,
        plugins: {
            legend: false // hide legend
        },
        scales: {
            y: {
                display: false // hide y axis labels
            },
            x: {
                display: false // hide x axis labels
            }
        }   
    }
})
<div class="chart-wrap" style="width: 200px; height: 100px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.5.1/chart.min.js" integrity="sha512-wt1bjgtlnmtgp0dqnfh1xlklbnpeodaiq8zn5jla5wpc1sulk/o5uuomngvzddzkpvz9glyyna8w2s7rqitk5q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

score:13

you can also put the tooltip onto one line by removing the "title":

this.chart = new chart(ctx, {
    type: this.props.horizontal ? 'horizontalbar' : 'bar',
    options: {
        legend: {
            display: false,
        },
        tooltips: {
            callbacks: {
                label: tooltipitem => `${tooltipitem.ylabel}: ${tooltipitem.xlabel}`, 
                title: () => null,
            }
        },
    },
});

enter image description here

score:13

it's just as simple as adding this:

legend: {
    display: false,
}

or if you want you could use this other option which should also work:

chart.defaults.global.legend.display = false;``

score:14

new solution chartjs v3.1.1

the above solution is correct for previous versions of chart js prior to v3.1 for v3.1.1 use the following

 ...
 options: {
  plugins:{
   legend: {
    display: false
   }
  }
 }

score:48

add:

chart.defaults.global.legend.display = false;

in the starting of your script code;

score:107

as of 2021, the namespace has changed from options.legend to options.plugins.legend. this simple code worked for me -

data{
...
},
options: {
  plugins: {
    legend: {
      display: false
    }
  }
}

Related Query

More Query from same tag