score:2
Accepted answer
You can change the font color of legend's label, in the following way ...
options: {
legend: {
labels: {
fontColor: 'white'
}
},
...
}
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ
var chart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['A', 'B', 'C', 'D', 'E'],
datasets: [{
data: [1, 1, 1, 1, 1],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 206, 86)',
'rgb(75, 192, 192)',
'rgb(153, 102, 255)'
]
}]
},
options: {
legend: {
labels: {
fontColor: 'white' //set your desired color
}
}
}
});
canvas{background: #222}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
score:0
Sorry to unbury this but trying any solutions and only this works. create plugin before chart :
Chart.plugins.register({
beforeDraw: function(c) {
c.legend.options.labels.fontColor = 'hsl(0,0%,85%)';
}
});
var chart = new Chart(ctx, {
....
Source: stackoverflow.com
Related Query
- How to change the color of Chart.js points depending on the label
- How to change the label color in chart.js?
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- How to change color by clicking on the chart bar?
- In ChartJS how do I change the color of a label in the 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 to change label color of ng2 chart in angular
- How to change the color of legend in chartjs and be able to add one more legend?
- How do I change the 'months' language displayed on the date axis in Chart JS?
- Chartjs change the specific label color in x axis in callback function
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- PrimeNg bar chart how to show a label for the y-axis
- How to Change the Label Strike-Through with light gray on a ChartJS Doughnut?
- How to change line segment color based on label value in chart.js?
- How to change color of column in chart js
- How to use set the color for each bar in a bar chart using chartjs?
- angular-chart.js doughnut chart : How do I change width of the arc of a doughnut?
- Change the background color of tooltip dynamically using chart color
- How can I change the label name when you hover your data in Chart.js?
- How to change the chart line or area colors according to the user need?
- How to change background color of labels in line chart from chart.js?
- How to change default label of each bubble in bubble chart using chartjs-plugin-datalabels
- How to rotate the Label text in doughnut chart slice vertically in chart.js canvas, Angular 12?
- Chart JS, ng2-Charts - How to make the label to the right of pie chart instead on top?
- How to style a pie chart in chart js? I want to change the border color, border width and give them shadow
- Chartjs - how to change the notation of doughnut chart
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- How to change the color of the bar in barchart if the data is negative - Angular Charts
- Chart.Js : How to change the color of a point, based on a third data
More Query from same tag
- How to create html id attributes dynamically?
- (Chart.js) Is there a way to compare one chart with another so as not to have this inconsistent effect of small values being as big as big values?
- chart.js pie chart issue with display: none
- How to draw pile/stacked bar chart?
- Hiding labels on y axis in Chart.js
- Chartjs Bar Chart showing old data when hovering when use of ajax
- How to fetch data from DB on Chart.js using Laravel?
- Specify varying thickness of each bar in Chart.js bar chart
- How I can use a list of a string array in JavaScript into blade view?
- How to put arguments in a jchart.Chart class
- ChartJS glitches
- Draw bubbles to show details in line chart using chart js
- Cannot access a variable declared outside a For loop (Javascript)
- How can I create a bar chart that has multiple yAxes scales?
- Why can I not see a data value when hovering over a point on the radar chart?
- how to change dynamically yAxes in chart.js
- How to limit number of displayed points in chart.js?
- chart data on 24hr X axis using recharts, chart.js, I don't mind what
- ChartJs + ie11 doesn't work
- Show count concatenated to labels using chart.js
- Drawing to canvas on click clears text when mouse leaves the chart
- Class declaration merging for an existing type
- Is there a convenient way to print values to a JS chart from a CSV file without converting it?
- How can I create custom tooltips for each data point in a graph?
- Get Date Range with Given Date
- Chart JS not rendering on iOS devices
- How display straight corner in chartjs
- Change Step Area Color Based on Value
- HTML: How to get rid of overlapping
- int Array with empty value