score:2
Accepted answer
i've found the answer!
based in the code from the link i put in the question.
you need the names of the values given in the series. this is my series array right now:
$scope.series = ['low blue', 'blue', 'strong blue'];
we need to add a function to the datalabels.color, and in the function we'll indicate how to color the labels of the ones corresponding to "strong blue":
plugins: {
datalabels: {
color: function(context) {
var index = context.dataindex;
var value = context.dataset.data[index];
//inside the "dataset" we look for the "labels" we are using
//and store them in a variable
var valuewhite = context.dataset.label;
//we make the condition: if a value of the label is "strong blue"
//then we color this label 'white'
if(valuewhite === 'strong blue') {
return value = 'white';
} else {
//if it's any other label, we color it 'black'
return value = '#000';
}
}
}
this way all the sections with a strong blue as background will have color white, and the rest will be black.
Source: stackoverflow.com
Related Query
- Contrast chart.js datalabels colors with the background
- chart.js Line chart with different background colors for each section
- Legend color not working with randomly generated background colors in chartjs pie chart
- The colors of the bar chart in chart.js is not showing. I tried background color and fill color but none of it worked
- How can I change the background colors of a bar chart after it has been created?
- Chartjs random colors for each part of pie chart with data dynamically from database
- How can I trigger the hover mode from outside the chart with charts.js 2?
- Chart.js - Color specific parts of the background in a line chart
- why is the background black when with Chartjs export to a image
- Angular chart how to show the legend data value by default along with legend name
- Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. chat.JS
- Vue Chart 3 - Doughnut Charts with Text in the Middle (Trouble registering a plugin)
- Having problems getting a line chart in Chartsjs to go *up* to 1, with bkg fill *under* the chart line
- Change the background color of tooltip dynamically using chart color
- Chart.js -> line chart -> multiple points with the same X
- How to change the chart line or area colors according to the user need?
- React JS Chart JS 2 is not hiding the grid lines in the background
- Background color of the chart area in chartjs not working
- angular-chartJs change chart background and highlight colors
- Can the colors of bars in a bar chart be varied based on their value?
- How to reduce the number of points shown on line chartjs chart with a large dataset?
- Doughnut chart updates with twice the data
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- How do you make a progressive line chart with time as the X axis?
- Legend isnt moving to the right on my doughnut chart created with chart.js
- How can I fix the offset of the gradient to be aligned with the chart points(chart.js)?
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- <Canvas is already in use. Chart with ID '18' must be destroyed before the canvas can be reused> in react
- How can i give the full Legend a background color in chart js?
- Problem with script src for Chart.js. The CDN for Chart.js funtions fine, so my code is ok. Somehow I'm not linking the file correctly
More Query from same tag
- Chart.js multiple datas between labels
- How to use chartjs-plugin-trendline with react-chartjs-2
- Make overlapping d3.js radar chart elements transparent
- how to filter year from datefield in django
- How to get the setState reassigned in react
- generator-angular-fullstack cannot add angular-chart.js
- How do I use ChartJS with a background color in the space between two line charts?
- using data structures in chartjs
- Moving point to clicked point in ChartJS (radarchart)
- How to select context or scale on chart in chartjs quickchart io to run getValueForPixel?
- How can we type a variable which is a method in TypeScript ? (Using Chart.js)
- Chart.JS - Tooltips - Issue: 3 data points, all three individual tooltips showing for each data point
- Vue Chart.js -- can I give a line chart a default value for missing data?
- ChartJS update chart with multiple datasets
- Chart.js 2.6.0 options / scales / xAxis / gridLines doesn't work for me?
- Issues getting JSON string for chart.js data
- How to add new x axis in chart JS?
- Chart.js Polar Area Chart is not scale right
- Chart.Js Doughnut not calculating JSON data properly
- Programmatically creating labels for Chart.js in angular?
- How to change font size of labeled scales in Chart.js?
- Loop through multiple rows as labels and data in chart.js and PHP
- Background color hides Y labels
- Point Style property with Inverted Image in Line Chart.js
- Chart.js overlapping tooltip text
- chartjs creating data array dynamically
- Y-Axis with different colors
- Replace a Canvas Pie Chart Onclick
- How do I change the colours of specific labels in ng2-charts?
- How to set max/min on x axis to display time range in Chart.js?