score:14
Based on the code that you supplied in your question, it looks like you forgot to add labels
data in your chart data object. Without this information chartjs is not able to generate your axis and map each dataset data to it.
Also, since you mentioned you wanted the legend to be below the chart, I added the display: bottom
option. Here is the working code.
var ctx = document.getElementById("mybarChart").getContext("2d");
var mybarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Votes'],
datasets: [{
label: '# of Votes',
backgroundColor: "#000080",
data: [80]
}, {
label: '# of Votes2',
backgroundColor: "#d3d3d3",
data: [90]
}, {
label: '# of Votes3',
backgroundColor: "#add8e6",
data: [45]
}]
},
options: {
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: "#000080",
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
Here is a working codepen example as well.
score:2
With the latest version of the chart.js (3.6.0), you can control the Legend display with the following code:
const options = {
plugins: {
...
legend: {
position: "right", // by default it's top
},
...
},
};
I know this has been here for so long but might help someone who faced the same issue as me in the future.
Source: stackoverflow.com
Related Query
- ChartJS display legend
- ChartJS horizontal chart display legend on each bar
- ChartJS 3 doesn't display legend
- ChartJs doesn't display the line item legend
- ChartJS does not display the legend
- Custom Legend with ChartJS v2.0
- Display line chart with connected dots using chartJS
- Chartjs Bar Chart Legend
- How to add label for ChartJs Legend
- Display values outside of pie chart in chartjs
- Change Chartjs Legend Icon Style
- ChartJS bar chart with legend which corresponds to each bar
- ChartJS with AngularJS - Canvas won't display anything
- How to change the color of legend in chartjs and be able to add one more legend?
- ChartJs line chart - display permanent icon above some data points with text on hover
- Chartjs display label & units when mouse is hover stats
- How to create custom legend in ChartJS
- How can I force my ChartJS canvas legend to stay in a single column?
- Chartjs hide dataset legend v3
- Removing ChartJS 2 border and shadow from point style legend
- How to add ChartJS code in Html2Pdf to view image
- ChartJS - how to display line chart with single element as a line? (not as a dot)
- Unable to hide Legend in Chartjs with PrimeFaces7.0
- how to display chart.js legend with different bar color
- Always display ChartJS custom tooltips
- ChartJS do not render any legend if the label is falsy
- Display point style on legend in chart.js
- ChartJS show value in legend (Chart.js V3.5)
- ChartJS - Adding legend title into tooltip title
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
More Query from same tag
- "Inline" labels in ChartJS
- Tooltip alignement with Chart.js v2
- Hide x-axis labels but show tooltips in chart.js
- Is it possible to add a javascript chart in a webview in Xamari.Forms
- Multiple charts in one page with chart.js
- Change background transparency of Chart.js chart
- How to change font size, padding of chart title only, in chart.js 3.x
- Is there any way to change the font size of labels in bar chart in Chart.js v3?
- Rotate chart "pie" to need value or angle
- Is it possible to fill particular portion between given start & end angle in pie chart in chart.js?
- Chart.js positive/negative values fill with out twist
- Chartjs is graphing my values at positions 0,1,2 rather than their values along the x axis
- Load JSON to display data, using ng-repeat {ANGULAR.JS}
- Chart.js responsive css size
- How to export/import modules between component files in Javascript
- How to add a custom event on legend click
- Chart.js: bar chart first bar and last bar not displaying in full
- chart.js - how to draw and manage line when only one label present in chart js Linechart
- chart.js with null data point in dataset
- charts are not being show with wicked_pdf
- Javascript generate random color with equivalent highlight
- ChartJs, How can I get different color fills between my two datasets in a line graph?
- Create a Graph and return it as an image on a nodejs server
- I want to bind the legend option with checkbox(show legend or not)
- Long text in x-axis is cut in bar graphs ng2-charts
- Showing Percentage and Total In stacked Bar Chart of chart.js
- Chartjs not giving 'xLabel' properly on tooltip
- ReactJS - Moving vertical line when hovering over Line chart using chart.js v3.7.1
- Custom gridLines and Axes Chartjs
- Adding Image inside Linechart points in ChartJs