score:13
Accepted answer
To set more legends, you need to add multiple datasets. Each dataset will represent one legend and the legend's color will automatically be set according to the dataset's background color.
Chart.plugins.register({
beforeDraw: function(c) {
var legends = c.legend.legendItems;
legends.forEach(function(e) {
e.fillStyle = '#07C';
});
}
});
var canvas = document.getElementById('myChart');
var data = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
label: "My First dataset",
backgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 20, 81, 56, 55],
}, {
label: "My Second dataset",
backgroundColor: "rgba(25,25,255,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 20, 81, 56, 55],
}]
};
var option = {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)"
}
}]
}
};
var myBarChart = Chart.Bar(canvas, {
data: data,
options: option
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
Source: stackoverflow.com
Related Query
- How to change the color of legend in chartjs and be able to add one more legend?
- How can I move chartJs legend left side and change the width and Hight of the chart?
- unable to add background color to the canvas using jspdf and chartjs
- Is there any way to change the font color and size of labels in Chartjs 3.0.0
- How to change React chartjs-2 legend click functionality to hide all except the one clicked?
- In ChartJS how do I change the color of a label in the legend?
- How to add left padding for my charts done in ChartJs and my Google Map so it is not glued to the limit of the page on the left
- Change the color of the legend box and the color of the x grid lines in chart.js
- ChartJS - How to add Text between Pie Chart and Legend
- how to change the label color and set y-axis values 1k intervals and hide y-axis?
- How can i change the every legend label font color using chart.js version 2.8.0 (spacial line chart)?
- How can I change the color of certain lines in chartjs / vue-chartjs?
- How to add space Between Columns in Bar chartjs and remove the space in the end
- chartjs datalabels change font and color of text displaying inside pie chart
- Change point size and color on hover in chartjs
- How to add label for ChartJs Legend
- how to change background in chartjs and remove background lines?
- How to change the color of Chart.js points depending on the label
- How to change the cursor to a pointer when I hover over a bar in a ChartJS bar chart?
- Chartjs change the specific label color in x axis in callback function
- Chart.js: How can a line series (out of many) change line color and thickness upon mouse hover?
- Chart js: how can I align the legend and the title
- ChartJS -- How do I change scale color when I have to scales?
- How to change color of hidden legend item instead of strike-through in Chart.js
- ChartJS click on bar and change it's background color
- How to add background color between two lines in yAxis Chartjs
- How to add ChartJS code in Html2Pdf to view image
- How do I keep chart.js charts in one JS file, and not get errors when the ID from the JS file don't exist on one specific html page?
- How to Change the Label Strike-Through with light gray on a ChartJS Doughnut?
- How to draw a needle on a custom donut chart and add datapoints to the needle?
More Query from same tag
- laravel-chartjs not displaying anything
- How to connect a charts.js chart to data
- How to increase gaps between vertical gridlines in chartjs
- Multiple charts not working chart.js
- How do i have to implement my code to get correct json?
- How could chartjs font family display everywhere
- ChartJS - How to change color of some data points in graph
- chartjs line graph destroy function is not clearing the old chart instances
- Issues with ng2-charts
- ChartJS - Horizontal Stacked Bar Chart Tooltip being cut off by Bottom of Canvas
- Chartjs: I only want left and right padding in pie chart
- Chart.js render two charts on one page.
- Async showing data in pieChart from chart.js with typescript
- How do I change the bar colors in chart.js barcharts?
- chart.js - Disable labels
- chart.js with json data and jquery - error :-(
- Uncaught TypeError: Chart is not a constructor when using Chart.js
- How can I fix the offset of the gradient to be aligned with the chart points(chart.js)?
- How to line break a label object in ChartsJS (nested arrays won't work)
- Y-axis label in chartjs 2.0.0
- Pie Charts JS: How to set units?
- Vue JS setting data collection in component
- how to sort tooltip value in Chart.js
- ChartJS Realtime Animation
- Display character after y-axis data value in onhover pop up Chart.js
- Chart.js Graph Overrunning Container
- Data will not draw onto my chart
- Having trouble fetching data from database for chart in ASP .NET Core
- Chartjs - Set start and end value into a Bar Chart
- Why Primefaces donutChart is not working?