score:1
if you want to change all the points label color use the option pointlabelfontcolor
.
if you want to change points label color individually you have to change chart.js since it does not implement this feature.
here are the chart.js modifications needed to achieve change points label color individually:
change chart.js lines:
from:
ctx.fillstyle = this.pointlabelfontcolor;
to:
ctx.fillstyle = this.labels[i].fillstyle;
and
from:
ctx.filltext(this.labels[i], pointlabelposition.x, pointlabelposition.y);
to:
ctx.filltext(this.labels[i].text, pointlabelposition.x, pointlabelposition.y);
and
from:
textwidth = this.ctx.measuretext(template(this.templatestring, { value: this.labels[i] })).width + 5;
to:
textwidth = this.ctx.measuretext(template(this.templatestring, { value: this.labels[i].text })).width + 5;
your html should be:
<html>
<head>
<title>radar chart - example</title>
<script type="text/javascript" src="chartjs/chart.js"></script>
</head>
<body>
<canvas id="mychart" width="400" height="400"></canvas>
<script>
var data = {
labels: [{
text: "eating",
fillstyle: "#01a4e0"
}, {
text: "drinking",
fillstyle: "#ffe897"
}, {
text: "sleeping",
fillstyle: "#428e2a"
}, {
text: "designing",
fillstyle: "#6b3a0d"
}, {
text: "coding",
fillstyle: "#0d5e6b"
},{
text: "cycling",
fillstyle: "#450d6b"
},{
text: "running",
fillstyle: "#6b0d36"
}],
datasets: [{
label: "my first dataset",
fillcolor: "rgba(220,220,220,0.2)",
strokecolor: "rgba(220,220,220,1)",
pointcolor: "rgba(220,220,220,1)",
pointstrokecolor: "#fff",
pointhighlightfill: "#fff",
pointhighlightstroke: "rgba(220,220,220,1)",
data: [65, 59, 90, 81, 56, 55, 40]
}, {
label: "my second dataset",
fillcolor: "rgba(151,187,205,0.2)",
strokecolor: "rgba(151,187,205,1)",
pointcolor: "rgba(151,187,205,1)",
pointstrokecolor: "#fff",
pointhighlightfill: "#fff",
pointhighlightstroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}]
};
var ctx = document.getelementbyid('mychart').getcontext('2d');
var myradarchart = new chart(ctx).radar(data);
</script>
</body>
</html>
if you use the same chart.js for other radar charts that would still use labels as arrays you can add support for both ways of setting labels (array and object) replacing the mentioned chart.js lines using these instead:
ctx.fillstyle = this.labels[i].fillstyle ? this.labels[i].fillstyle : this.pointlabelfontcolor;
ctx.filltext((this.labels[i].text ? this.labels[i].text : this.labels[i]), pointlabelposition.x, pointlabelposition.y);
textwidth = this.ctx.measuretext(template(this.templatestring, { value: (this.labels[i].text ? this.labels[i].text : this.labels[i]) })).width + 5;
score:7
based on chart.js 2.7 documentation we may color labels with options.scale.pointlabels.fontcolor
:
let tagslabel = [ 'axe1', 'axe2', 'axe3'];
let chart = new chart(targetnode, {
type: 'radar',
data: {
labels: tagslabel,
datasets: [
{
data: [
0, 2,
],
}
]
},
options: {
responsive: true,
legend: {
position: 'left'
},
title: {
display: true,
text: "it work's"
},
animation: {
animatescale: true,
animaterotate: true
},
scale: {
// ticks: {
// backdropcolor: 'red',
// // include a dollar sign in the ticks
// callback: function(value, index, values) {
// return '$' + value;
// }
// }
pointlabels: {
// callback: function(value, index, values) {
// return '$' + value;
// }
fontcolor: tagslabel.map((lbl)=>randcolor()),
},
},
}
});
Source: stackoverflow.com
Related Query
- Change labels colors for radar chart js
- Chartjs - Add backgroundColor for labels radar chart
- ChartJS/High Charts Radar chart - Different radial axis labels for each category that appear on hover
- Chart Js Change Label orientation on x-Axis for Line Charts
- Chartjs random colors for each part of pie chart with data dynamically from database
- Chart.js how to show cursor pointer for labels & legends in line chart
- chart.js Line chart with different background colors for each section
- Chart js. How to change font styles for "labels" array?
- Chartjs Radar - Change color of end point labels
- Chart.js Radar Chart How to Remove Outer Labels
- Multiple line labels for chart js
- Remove radar chart labels in chart.js
- Chartjs 3.5.0 - Radar Chart - Converting the labels to images
- Is it possible to change pointStyle for elements of a ChartJS bubble chart per dataset?
- How to set colors for Chart.js tooltip labels
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- How to disable Chart.js Radar Chart point labels
- change space between horizontal (grid) lines for line chart
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- create different labels for different data chart js
- chart.js change size of label of radar chart
- How to change fonts and axis labels for Chart.js image rendering with QuickChart?
- Click on interactive chart.js bar chart and get value for labels and groups in JS
- chart.js: How do I make the radar chart axis labels bigger?
- 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?
- Trouble setting options for radar chart on Quickchart.io
- angular-chartJs change chart background and highlight colors
- Charts.js - Colors for stacked bar on multi-series line/bar chart are not working
- Charts.js - Bar chart different colors for value intervals not working
More Query from same tag
- (Laravel) How to pull data from API Controller so that it will display in vue-chartjs
- How to make ticks evenly spaced with Chart.js
- angular chartjs not showing data properly
- Is it possible to print to pdf a Canvas with other div elements?
- Chartjs not working with d3 from csv source
- Chart.js: Fixed horizontal location of vertical axis
- Mapping data from JSON not parsing well
- Chart.js multicolored fill sections
- chart.js not accepting data in dataset which stored in local storage
- ChartJS: Uncaught TypeError: Cannot read property 'call' of undefined
- ChartJS set yAxes "ticks"
- Have shading begin at 0 but not scale
- Is it possible to get chart js data using ajax?
- Disable Charts.js animations in Polymer?
- Chart.js unable to display data
- Problem with primeNG chart: Module not found: Error: Can't resolve 'chart.js/auto'
- Cursor pointer change onhover not working in chartjsv3
- Error in created hook (Promise/async): "TypeError: Cannot read property 'position' of undefined"
- How to fix [<br /> when trying to enter data through php in data (chart.js)
- How to hide tooltip for selected datasets? - Chart.js v2.8
- How do I remove cartesian axes from chart js?
- Chart.js click on labels, using bar chart
- Javascript in wordpress causes SyntaxError
- How to pass my array of objects into a graph with Chart.js
- Vue Chart.js component does not render
- ChartsJS Legend not showing in Angular11
- How do I create a chartjs bar chart?
- ChartJS "half donut" chart not displaying properly
- How to change text colour of specific labels of axis in Chart JS?
- Cannot read property 'length' of null error in Javascript