score:2
Accepted answer
you can extend the radar chart type to do this, like so
chart.types.radar.extend({
name: "radaralt",
initialize: function (data) {
chart.types.radar.prototype.initialize.apply(this, arguments);
var originalscaledraw = this.scale.draw;
var ctx = this.chart.ctx;
this.scale.draw = function () {
var linewidth = this.linewidth;
// this bypasses the line drawing in originalscaledraw
this.linewidth = linewidth;
originalscaledraw.apply(this, arguments);
ctx.linewidth = this.linewidth;
var scale = this;
// now we draw
chart.helpers.each(scale.ylabels, function (label, index) {
// color of each radial line - you could replace this by an array lookup (if you limit your scalesteps)
ctx.strokestyle = "hsl(" + index / scale.ylabels.length * 360 + ", 80%, 70%)";
// copy of the chart.js code
ctx.beginpath();
for (var i = 0; i < scale.valuescount; i++) {
pointposition = scale.getpointposition(i, scale.calculatecenteroffset(scale.min + (index * scale.stepvalue)));
if (i === 0) {
ctx.moveto(pointposition.x, pointposition.y);
} else {
ctx.lineto(pointposition.x, pointposition.y);
}
}
ctx.closepath();
ctx.stroke();
});
}
}
});
and then call it like so
var ctx = document.getelementbyid("mychart").getcontext("2d");
var myradarchart = new chart(ctx).radaralt(data, {
scalelinewidth: 10
});
// this is requried if you have animation: false
// myradarchart.update();
fiddle - http://jsfiddle.net/x3ftqx5r/
of course, the sane thing would be to change the lightness value instead of the hue value :-)
Source: stackoverflow.com
Related Query
- Chart.js (Radar Chart) different scaleLineColor for each scaleLine
- ChartJS/High Charts Radar chart - Different radial axis labels for each category that appear on hover
- chart.js Line chart with different background colors for each section
- Different color for each column in angular-chartjs bar chart
- Can I specify a different font size for each row of text in Chart Title?
- chart js - Apply different color for each x-axes label
- Chart.js different scaleLine color of radar chart (angular)
- How do I get a different label for each bar in a bar chart in ChartJS?
- chart.js radar scaleShowLine for each scaleLine
- Different color for each bar in a bar chart; ChartJS
- Chartjs random colors for each part of pie chart with data dynamically from database
- Chart.js Line-Chart with different Labels for each Dataset
- Chart.js - Line charts with different colors for each border lines
- Chart js different background for y axis
- Change labels colors for radar chart js
- Chart JS, Choose different Y-axis for different datasets
- Add a text as tooltip for each point on a line chart
- Vue ChartKick - different colours for bar chart
- How to map json array to two different array for chart
- chartjs custom y axis values, different text for each one
- How to show different product name for every bar in chart js
- Chartjs - Add backgroundColor for labels radar chart
- How to wait for all items to load within ng-repeat before then rendering a chart for each item
- How to use set the color for each bar in a bar chart using chartjs?
- How can I have different values for the chart and the tooltip in chart.js?
- create different labels for different data chart js
- 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
- Trouble setting options for radar chart on Quickchart.io
- Charts.js - Bar chart different colors for value intervals not working
More Query from same tag
- Chart.js maxBarThickness is deprecated in angular 8
- How to reduce the number of data points displayed in react-chart-js2 (data decimation)
- Chart.js error: Bar is not a function
- Legend on chart.js
- How do I display a chart with chart.js?
- Adding options to vue-chartjs seems not working
- Page will not load and I get a "Newtown.json" warning message
- How using charts.js with JSON?
- Calling MouseLeave chartJs Angular
- Chart.js setting maximum bar size of bar chart
- Change background point color at runtime for angular ng2-charts / chartjs
- borderdash options in chart js changes my legend
- javascript chart library for every minutes data
- How to Push data dynamically from firebase to bar graph in angular
- Stack two y axes using chart.js
- ChartJS - Highlight Weekends and Lowest and Highest Values
- Chart.js - if there is not value show 0
- customized Doughnut char using charjs
- Chartjs Options are ignored
- How to show labels of dataset using chart.js
- Chart.js library V.2 change Cursor to not allowed
- chartJS doesn't show graphs on iphone/ipad
- How to install Chart.js and angular-chart.js (Error: Chart.js library needs to be included)
- Chat.js, Codeigniter and MySQL. Something wrong on recover data
- How to assign variables to data passed through a WEB API in Angular?
- Chart JS Fill Between two lines
- Grabbing the title in plugin for ChartJS
- chart.js Line chart doesn't display line past a certain point in the chart
- Chartjs is disappearing in Ionic tabs when keyboard dismiss
- Add DataSet Bar Chart - Chart.JS