score:1
the only way i have found to do this and some other customisation on the legend is to implement the legend item interface.
the accepted answer here in combination with the legend item interface should be a good start.
here's a jsfiddle that i made from that answer, but updated for chartjs 3.7.1. the main part to focus on is this:
options: {
plugins: {
legend: {
labels: {
usepointstyle: true,
generatelabels: function(chart) {
var data = chart.data;
if (data.labels.length && data.datasets.length) {
return data.labels.map(function(label, i) {
var meta = chart.getdatasetmeta(0);
var ds = data.datasets[0];
return {
text: label,
fillstyle: ds.backgroundcolor[i],
strokestyle: ds.legendoutline[i],
linewidth: ds.borderwidth,
hidden: isnan(ds.data[i]) || meta.data[i].hidden,
index: i
};
});
} else {
return [];
}
}
}
}
}
strokestyle is the outline property, and i've made a field in the dataset called legendoutline. legendoutline and the data from the dataset are both referenced with i, so the legendoutline[i] points to the label representing data[i]
Source: stackoverflow.com
Related Query
- ChartJS different border color for legend
- Different color for each bar in a bar chart; ChartJS
- Different color for line segments in ChartJS
- Chartjs Different Fill Color For Overlap Area
- Set different color for each bars using ChartJS in Angular 4
- Different color for each bar in a bar graph in ChartJS and VueJS
- Angular 4: Different color for bar in bar chart dynamically using ChartJS
- ChartJS - Different color per data point
- Chart.js Line, different fill color for negative point
- How to add label for ChartJs Legend
- Chart.js - Line charts with different colors for each border lines
- Different color for each column in angular-chartjs bar chart
- Border radius for the bar chart in ChartJS
- How to change the color of legend in chartjs and be able to add one more legend?
- How to set a full length background color for each bar in chartjs bar
- Gradient color for each bar in a bar graph using ChartJS
- chart js - Apply different color for each x-axes label
- Change border color on legend in Chart.js
- Removing ChartJS 2 border and shadow from point style legend
- how to display chart.js legend with different bar color
- Chartjs tick color different at zero
- chartjs custom y axis values, different text for each one
- how to set color for each item in tooltip with ChartJS
- Is there any way to use 2 different color for the same bar in a chart?
- Setting Common labels and background color common for all the charts in ChartJs
- ChartJS Version 3 - common legend for multiple line charts
- How to apply to different bground color for each area in Chart.js
- chart.JS i want to put different color for each Y axis value grid line color
- Change background point color at runtime for angular ng2-charts / chartjs
- I cant get Legend to work for my chartjs donut chart
More Query from same tag
- How to create a linechart with Chart.JS (not filled)
- how to decrease white space of a card containing pie-chart in mobile view
- How to get Max Values of a Multidimensional Array for 30 Days
- Using Chart.js on Laravel 5.3
- old yAxis ticks do not get removed (chartjs, react-chartjs-2 wrapper)
- Chart only prints out first value using jquery ajax php
- Cant change labels in Chart.js 2.0 Beta
- Customize ChartJS Hover Data Format
- How to use Axios API with Chart.js and React.js
- Chart.js legend style
- using data structures in chartjs
- Chart.js - Creating multiple charts on one page
- How to make the last item on the chart js active?
- Chart.js Polar Area Chart scale background color
- Chart.js plotting two json datasets on a line chart
- highlightFill for radar charts in chartJS
- Trying to create something from chart.js
- In Chart.js I want to show dotted gridLines like in below image
- Chart.js maxBarThickness option not working
- How to display chart using Chartjs with JSON data in Laravel
- Chartjs - Stacked bar chart blocking other values
- How to get chartjs column chart in ng-repeat
- ChartJS incorrect plot when plotting multiple line charts in one graph
- Line Chart x-Axis datapoints with Strings
- Keep chart.js doughnut with fixed width and height centered in container
- How to show bar labels in legend in Chart.js 2.1.6?
- ChartJS - Line Chart with different size datasets
- Format X label on mouse hover in chart.js
- ChartJS - Display one set of data at a time
- I am not able to show dotted circle for percentage