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 Stacked Bar Chart with Multiple levels or categories
- how can i use chartjs-plugin-annotation?
- Chart.js: A value is empty, but the line must not be broken
- "Cannot read property 'xyz' of undefined": How to use map or foreach on numeric json?
- Problem creating scatter graph using chart.js
- Resize pie chart from chart.js
- Chart.js - change which data the legend uses for the coloured box
- Chart JS Zoom Pan
- Display Time In Y Axis - Bubble Chart
- Chart.js - How to create an auto-scaling line diagram for a big amount of data happenning over time
- dyamically constructing javascript object
- Pie chart inside doughnut on same canvas
- Chart.JS Mixed Chart - Bars Not Showing
- How to dynamically change point location with line in Chart.js?
- How do I access chart.js options dynamically?
- Chartjs different length of labels and datasets
- CHART.JS scriptable backgroupColor attribute
- Merge 2 charts into 1 chart using update button (chart.js)
- Chart.js v2, remove padding/margin from radar chart
- Manipulating data point in chart.js external tooltip
- JavaScript critical error...Syntax Error (MVC 5) when passing array to Charts.js
- How to create Stacked bar chart from JSON in chart.js
- Chart.js chart in vue.js component does not update
- Incorrect chart displayed using chart js
- How use data dynamically in LineChart.js
- what is error can't acquire context from the given item?
- How to make Chart.js with dynamic months on x-axis
- chart js - Apply different color for each x-axes label
- How to create two x-axes label using chart.js
- ChartJS doughnut data toggle on custom button click