score:323
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,
}
},
},
});
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
}
}
}
Source: stackoverflow.com
Related Query
- Chart.js v2 hide dataset labels
- How to display Line Chart dataset point labels with Chart.js?
- Chart.js - bind data in dataset to specific chart labels
- Chart.js bubble chart changing dataset labels
- Hide labels from pie chart in chartjs
- Hide chart labels
- How to hide radar chart index labels (chart.js)
- Chart JS is using 1,2,3 as y values for my points for the second dataset instead of their passed in labels
- Limit labels number on Chart.js line chart
- Chart.js - How to set a line chart dataset as disabled on load
- Chart.js Show labels on Pie chart
- Is it possible in chartjs to hide certain dataset legends?
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Chart.js Line-Chart with different Labels for each Dataset
- chart.js: Show labels outside pie chart
- Chart.js how to show cursor pointer for labels & legends in line chart
- How do you hide the title of a chart tooltip?
- Chart JS data labels getting cut
- Chartjs hide data point labels
- Add DataSet Bar Chart - Chart.JS
- How to add an offset to a dataset in Chart js
- Hide Y-axis labels when data is not displayed in Chart.js
- Making the labels responsive in chart js
- Chart.js bar chart : Grid color and hide label
- Hide empty bars in Grouped Stacked Bar Chart - chart.js
- Hide labels on x-axis ChartJS
- Chart.js - Draw bar chart with multiple labels
- Chart JS grouped sub labels
- ChartJS hide labels on small screen sizes
- Display a limited number of labels only on X-Axis of Line Chart using Chart.js
More Query from same tag
- Chart.js click on labels, using bar chart
- Click events on Pie Charts in Chart.js
- How to chnage this value theHour[0].times into time format (HH:mm) using moment.js
- How do I scrape data in <canvas> element with python or javascript?
- Chart.js StackedBar doesn't show labels on bar and maximum y-value
- How to always show line chart tooltip in ionic-angular.?
- Papaparse with chart.js not displaying csv value on the x axis
- Chart.js stacked line chart with differently styled sections
- How to fix a stacked logarithmic bar chart values to fit the grid
- c# Chart.Js and JSON with NewtonSoft
- Chart.js 2.2.1 - Chart doesn't render correctly before resizing
- How can i hide label data on chart.js tooltip content?
- how to access array inside object without keys
- Chart JS distance between bar stacked
- Chartjs Custom Legend with Time on Y-axis
- Line Chart x-Axis datapoints with Strings
- Consuming an API and displaying items in chart/Angular
- Chart.js limit the display size of the chart
- Chart.js time scale graph - xAxis labelling
- ChartJS line chart or bar graph from a Java program
- Hover/click area in filled line chart in chart.js
- Export HTML content with Chart.jscanvases to PDF
- Chart JS - Line chart with days in x-axis
- How to set max/min on x axis to display time range in Chart.js?
- React Chartjs 2 display axes above datasets backgroundColor
- Format array output to be readable by chartjs in Laravel
- Chart js - render images on only one dataset
- Format Chart.JS Data Element To Be Currency
- why tooltip appears wrong in my chart JS?
- Maintain Y axis scale in graph with scroll in the X axis when the dataset grows bigger. Aspect-ratio problem