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
- how to use chart.js with knockout.js to create dynamic charts
- Chart.js. Values in a big range. The smallest values are not available
- Update Chart.js plugin
- Chartjs doesn't show chart properly with JSP
- How do I set a bar chart to default to a suggested maximum in chart.js v1.01?
- How to add new dataset in line chart of chart.js by iterating over dictionary in JavaScript?
- chart.js data wont update
- chart.js line chart and "correct" spacing between points? (i.e. horizontal position based on percent of width, not fixed)
- Set Tooltip over line Chartjs
- Make a chart clickable when placed under another SVG <View>
- chartjs doesn't render dates properly
- Chart.js Bar Chart change width (not duplicated to bar width questions!)
- Plot dataset from MySQL with Chart.js and PHP
- Chart.js How to invert (swap) axes?
- Create a prop for a chart.js pie chart
- Uncaught ReferenceError: require is not defined using react-chartjs.min.js
- Hide labels from pie chart in chartjs
- json_encode returns "
- How to hide tooltips with their respective dataset
- Data is not display in correct order after update
- Chart js data to start at zero
- Chart JS no animation line chart
- borderdash options in chart js changes my legend
- Bar chart not starting at 0
- Relative bar chart overlay on line chart in chart.js
- Can Chart.js combines Line Chart and Bar Chart in one canvas
- angular-chart cannot recognize value with thousands separator
- How do you limit the blur in a linear gradient on a canvas?
- ChartJS: get points information on hovering the points
- how to dynamicly change the json data in chartjs