score:1
Accepted answer
the position of the legend can be defines through the options position
and align
as follows:
options: {
legend: {
position: 'right',
align: 'start'
}
...
please have a look at your amended code below.
const labels_most_forked = ['html', 'typescript', 'ruby', 'others', 'javascript'];
const values_most_forked = [13, 7, 5, 1, 1];
var mychart = new chart('mychart', {
type: 'pie',
data: {
labels: labels_most_forked,
datasets: [{
label: '# of votes',
data: values_most_forked,
backgroundcolor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
bordercolor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderwidth: 1
}]
},
options: {
legend: {
position: 'right',
align: 'start'
}
}
});
canvas {
max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<canvas id="mychart"></canvas>
Source: stackoverflow.com
Related Query
- Is there any way I can customize my chartjs
- ChartJS – is there any way to remove blank space around pie charts?
- Is there any way to change the font color and size of labels in Chartjs 3.0.0
- Is there any way to show tooltip by default (without hover pie chart) on chartjs
- is there a way to call a Component's function from click function of Chartjs
- Is there any way to use 2 different color for the same bar in a chart?
- Is there any way to get Chiselled Effect in chart js?
- chart.js pie chart background colors: is there any way to generate them randomly?
- Is there any way to get y of specific x which not belongs to the dataset in Chart.js graph?
- Is there any way to display float bar in chart.js?
- Is there a way in chartjs to display different Boolean values with an offset in Y over a common timeline?
- Is there a way to represent date hole in chartjs time series?
- Is there any way to remove extra space and Horizontal line from Bar chart of Chart.js?
- Is there a way to insert multiple lines, with labels, dynamically, into a ChartJS Line chart?
- Is there any way to change the font size of labels in bar chart in Chart.js v3?
- How Can customize chartjs doughnut chart border and tooltip
- Is there any way to show a tooltip for points which are not visible on the chart in Chart.js?
- Is there a better way to create an 'n' number of charts in ChartJS and ASP.NET C#?
- In ng 2 chart during the load an undefined legend gets created automatically ,Is there any way to remove it?
- Is There any way to show image on top of the stacked bar, Am getting image on every color Instead of that i need only on top of each bar
- How to modify chartjs tooltip so i can add customized strings in tooltips
- TimeSeries scale in ChartJS 3.0.2. brings error "This method is not implemented: either no adapter can be found or an incomplete integration was ..."
- chartjs + Angular6 is not showing charts or any error
- Chart.js v2 is there a way to draw bar chart horizontally?
- How to customize Title position with ChartJS
- Is there a way to hide/customize ChartJS' above legend?
- Is there a way to filter data in Chart.js?
- How can I force my ChartJS canvas legend to stay in a single column?
- How to add ChartJS code in Html2Pdf to view image
- Chartjs in Reactjs - how can I update data dynamically?
More Query from same tag
- increase the label size of a line chart in chart.js
- Why can I not see a data value when hovering over a point on the radar chart?
- Issues with ng2-charts
- Chart.js animate chart after clicking a button
- Space between ticks marks and X axis with chart.js
- Update Chart in Javascript using Chart.js
- Time chart labels with some X axis labels using Chart js v3
- Is there any way to get Chiselled Effect in chart js?
- chart.js line chart update once every 5 seconds?
- Chart JS - Remember hidden label state after page refresh
- How use my data with Charts.js in my case?
- Cursor selects multiple points instead of just one - chart.js
- Chart js doesn't show chart
- Angular chart.js onClick is not working - how to get all elements of a bar when it is clicked on
- Horizontally align Chart.js y axes
- angular-chart.js showing black color chart in Firefox, Safari, and IE
- Chartjs Radar - Change color of end point labels
- How to draw pile/stacked bar chart?
- Chart.js chart onclick disables legend onclick
- Chart.js bubble chart pointStyle not working
- Using chart.js for isotopic patterns
- html2canvas Chart.js chart not rendered
- Ionic 3 + Angular 4 + chart.js - loading data from array
- How to zoom Y axis on time series or X-Y chartjs graph
- Chart JS Replace All Dataset Data
- ChartJS + twig symfony
- How to change Y axis labels
- Can Chart.js Horizontal bar work with time series data?
- How to import Chart.js with Webpack
- Chart.js 2 - label overlapping