score:1
Accepted answer
i assume you have your options for the legend in the wrong place:
as described in the migration guide the legend,plugin tooltip and title have been moved to the plugin section.
example:
var options = {
type: 'line',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
borderwidth: 1
},
{
label: '# of points',
data: [7, 11, 5, 8, 3, 7],
borderwidth: 1
}
]
},
options: {
plugins: {
legend: {
labels: {
font: {
size: 30
}
}
}
}
}
}
var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.4.0/chart.js"></script>
</body>
Source: stackoverflow.com
Related Query
- How can I reduce the spacing between my legend and chart proper in my Chart.JS bar chart, and increase it in the graph area?
- Chart.js v3: How can I grow fontsize of legend of my graph?
- Chart js: how can I align the legend and the title
- How can I re-distribute values within a charts.js pie chart when a legend item is turned off/on?
- How can i give the full Legend a background color in chart js?
- How can I add functionality to Chartjs Doughnut chart custom legend
- How can i get the Chart JS Bar Graph Bar Label and Value on click?
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- How can I make two of my lines in Chart JS thicker
- How can I make a stepline or stepped chart in chart.js or D3?
- chart js how to fill legend box with colour
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- How can I create a time series line graph in chart.js?
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- Chart,js Pie Chart can the gap between a pie chart and the legend be adjusted
- How can I force my ChartJS canvas legend to stay in a single column?
- How can I trigger the hover mode from outside the chart with charts.js 2?
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- How to make bar chart animation where all bars grow at the same speed?
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- How can I make line on chart thinner?
- Angular chart how to show the legend data value by default along with legend name
- How can I rotate a pie chart in charts.js?
- How to access or get value of specific graph on chart plot by click event?
- How can I achieve displaying data points on chart but Dotted? Chart.js V3.7.0
- Chart is too big. How can I reduce size for the chart in vue js?
- Chart Js update legend boxes of graph with graph line style
- how can i modify scale labels in angular chart js?
More Query from same tag
- charts js grid line not removing
- Chart.js : How I change the x axes ticks labels alignment in any sizes?
- Laravel - Bootstrap Javascript's conflict with Chart.js
- Chart.js: changing tooltip template
- keep 2 chart.js contained in a div
- How to have onclick/hover display associated value in ChartJS
- Use Google Spreadsheet as data source for Chart.js
- Unwanted line chart ''shadow" using chart.js
- How to use canvasjs to draw column chart using text data
- Offset left or right of the tooltip chartsjs
- Chart.js, PHP and JSON loop issue
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- Is there a way to add html markup to target each column individually in Chartjs/Canvasjs?
- SPFx ChartJS Web Part
- How can configure my y-axis on chart.js?
- The dataset for bar graph is not set properly using ng2 charts and ng5-slider in Angular
- ChartJS have xAxes labels match data source
- How to use chartjs-plugin-annotation in Angular
- How to extend chartjs line charts in ReactJS to show solid and dashed line together?
- Displaying data from simple html form to display in chartjs
- VueJs + Chart.js - Avoid ref for reactive updates
- Inverting X axis number labels in chart.js scatter chart
- Filter dates from the first day of the month to the current date
- Chart.js - Responsiveness not correctly working on device orientation change
- How to make customized stepSize for each horizontal bar in Chart.js graph
- Grouping by month with series of epoch timestamps in Chart.js
- Chart.js scale which increases by x (arbitary number) for each tick
- chart.js different x axis and tooltip format
- Chart.js - Show new data on button click
- Issue with HTML2Canvas - Green overlay while exporting