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
- How can I hide point label in chart Js?
- How to ignore points with same value in Chart.js
- Display line chart with connected dots using chartJS
- How to align elements using a ChartBar from Chart.js and Alerts from Bootstrap 4?
- ChartJS 3+ x-axis only showing full moment object instead of just month
- how to customize tool tip while mouse go over bars on Chart js bar chart
- Chart.js responsive pie chart
- Chart.js change color of Bar
- ChartJS add tooltip to a grouped bar chart
- ChartJS add custom tooltip to a stacked bar chart
- Using chartjs to limit data?
- How do I change the interpolator used in Chart.js?
- Parsing webserver JSON Values to data property
- How to refresh chart in django without refreshing whole page
- Dynamically set chart type with Angular Chart?
- Problem with saving data in array o Angular and Typescript
- chartjs 3.6.0 add X label
- Angular ng2-charts Radarchart compile error for startAngle
- Removing text shadow/blur from chart.js charts
- How do I create a chartjs bar chart?
- There's a way to link bars to a file in a chart bar in chart.js?
- Export chart.js into fixed sized chart
- How to cut line graph in ChartJS
- Chartjs Nested Doughnut Layers With Different Thickness
- Select data based on value of ID
- My chart is not shown on browser screen using chart.js in meteor
- Is it possible to get chart js data using ajax?
- is it possible to sum up the properties of an array of objects and to filter it according to another property?
- Hovering over line chart shows old chart data issue in chart.js
- Plot dataset from MySQL with Chart.js and PHP