score:2
use latest version of chart.js : https://www.chartjs.org/dist/master/Chart.min.js for more reference check this documentation and add align:'middle'
in your legend it will work's
legend: {
position: "right",
align: "middle"
},
var ctx = $('#myChart');
ctx.height(100);
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["APP1", "APP2", "APP3", "APP4", "APP5"],
datasets: [{
data: [25, 61, 47, 45, 30],
label: "Response > 5",
borderColor: "#5151A1",
backgroundColor: "#5151A1"
}, {
data: [22, 38, 53, 17, 55],
label: "Response <= 5",
borderColor: "#408040",
backgroundColor: "#408040"
}]
},
maintainAspectRatio: false,
options: {
responsive: true,
legend: {
position: "right",
align: "middle"
},
scales: {
yAxes: [{
ticks: {
min: 0,
//max: 100,
callback: function(value) {
return value + "%"
}
},
scaleLabel: {
display: true
//labelString: "Percentage"
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="450" width="600"></canvas>
Check your updated fiddle here
If npm install chart.js
not working then refer this answer for more details check the chart.js documentation.
score:2
Updated
options: {
plugins: {
legend: {
position: "right",
align: "middle"
}
}
}
Source: stackoverflow.com
Related Query
- Chart js. How to align text by the center of the tooltip?
- How to align Chart.JS line chart labels to the center
- Chart js: how can I align the legend and the title
- Angular-ChartJS align legend right center
- chart js how to fill legend box with colour
- How to align Chart JS "legend" on right-center
- Angular chart how to show the legend data value by default along with legend name
- how to add percentage value to legend field in pie chart using chart.js
- how to add legend in pie chart
- How to align legend in angular-chart.js
- Chart JS, ng2-Charts - How to make the label to the right of pie chart instead on top?
- how to align count text center in horizontal bar in the Chart.js?
- How can I re-distribute values within a charts.js pie chart when a legend item is turned off/on?
- Legend isnt moving to the right on my doughnut chart created with chart.js
- how to increase space between legend and chart in chartjs (ng2charts ) using angular
- How can i give the full Legend a background color in chart js?
- ChartJS Pie Chart How default just show 2 legend datas
- How to set 3 axis in google chart (V-Axis Left as Qty, V-Axis Right as Series Column and H-Axis as TimeOrder)?
- How to show/hide animation when legend clicked chart js
- How to print a chart rendered by code
- how to put a second pie chart right next to first pie chart inside the bootstrap card
- 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?
- How can I cause a legend to appear to the right of the pie (Chart.JS)?
- How to remove the Legend of chart from angular Chart.js
- how to change point style legend to diamond in chart js
- ChartJS - How to add Text between Pie Chart and Legend
- How to align bars in bar chart - Chart.js
- How to increase the size of the donut or pie chart and keep the legend next to it in chart JS?
- How do I destroy/update Chart Data in this chart.js code example?
- how to highlight the bars in stacked bar chart of chart.js on clicking a legend
More Query from same tag
- Chart.js : Multiple colors for tooltipFontColor
- How to change line color based on data - chartist or chart.js
- Why chartJs throws length of undefined although everything seems correct
- JQuery insertAfter() Method only works once when inserting a Chart.js chart
- How to access or get value of specific graph on chart plot by click event?
- How to display final point value in charts.js
- react-chartjs-2 TypeError: undefined is not an object (evaluating 'nextDatasets.map')
- Bar Chart of ChartJS does not Render
- how to update chartjs2 option (scale.tick.max)
- How Export an Editable Chart with content to PPT and Excel
- Legends in Chart Js don't appears
- How to change the z order of a chartjs polar chart
- Chartjs v3 tooltip label not showing tooltip label color on custom calbacks
- Tooltip overriding the text in chart js
- Can't make chart with Chart.js
- Chart.js - Where do I find which components should be registered?
- The real time chart sometimes does not display when I switch the target
- How to manipulate different charts by angular
- How to get labels on ChartJS Pie chart segments
- Chart.js Legend not showing
- How to pass a dictionary to ChartJS?
- Vue Chart.js doesn't get initialized in Vue Tab
- how to highlight bar in ChartJS with onkeyup Input
- Chart js adding number
- Chartjs gradient background color based on min and max values
- Chart.js error Cannot read property 'length' of null
- How to style a pie chart in chart js? I want to change the border color, border width and give them shadow
- Laravel 5 Chart Js rendering multiple charts in blade template error
- Bar Chart.js doesn't show values with PHP, MySQL, AJAX
- How to loading animation while populating activerecord in Rails 4.0?