score:1
Accepted answer
this can be done by defining scale.gridlines.color
option as an array of colors.
options: {
scale: {
gridlines: {
color: [...]
}
}
}
please take a look at the below runnable code and see how it works.
window.mychart = new chart('canvas', {
type: 'polararea',
data: {
datasets: [{
label: 'my dataset',
data: [4, 5, 4, 2, 6],
backgroundcolor: ['rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)']
}]
},
options: {
scale: {
gridlines: {
color: ['black', 'orange', 'yellow', 'green', 'blue']
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.8.0/chart.min.js"></script>
<canvas id="canvas"></canvas>
Source: stackoverflow.com
Related Query
- How to colorize individual rings in polar chart background in chart.js/ng2-charts?
- How to save Chart JS charts as image without black background using blobs and filesaver?
- How to customize tooltip on mouse hover of a polar area chart of Angular Charts
- how to not repeat code while creating multiple charts in chart js
- How to display the labels in doughnut chart using ng2 charts?
- How to add gradient background to Line Chart [vue-chart.js]
- How to add multiple background color in line charts
- How to add background image in bar chart column in Chart.js?
- How to add label in chart.js for polar chart area
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- How can I implement Polar area charts with Chart.js and Canvas
- How can I style scale numbers in a Polar Area chart (chart.js)
- How to remove or color line/grid in polar chart area using Chart.js?
- How to change background color of labels in line chart from chart.js?
- How do I remove the ticks or inner circles of my polar area chart Chart.js
- How can i give the full Legend a background color in chart js?
- How to make the background color of the chart as gradient using Chart.js
- How to show Nested charts Radar chart within Doughnut Chart?
- How to add unused data background to bar in chart js
- How can I add background color of length bars in chart (chartJS)?
- How can I display desired/particular chart in App.vue from Charts.vue which contains different charts in Vuejs
- How to print a chart rendered by code
- ng2 charts bar chart need spacing between 2 bars in series Angular
- Ng2 charts - Animation doesn't work on line chart onInit
- How to assign different background colors to chart.js pie chart data set?
- ng2 scatter chart how to put labels in x axis
- Chart.js Polar Area Chart scale background color
- How do i have a single Chart.vue component instead of different chart components and then display charts from it by changing id of the API
- react-chartjs-2 how to set multiple background levels within a line chart
- How can I change the background colors of a bar chart after it has been created?
More Query from same tag
- ChartJS doesnt display labels provided by Jinja variable
- how to use chart.js with knockout.js to create dynamic charts
- Vertical align bar chart from chart.js not working
- Chart.js and react-chartjs-2 property translate is missing type
- How to change chart.js axis labels color?
- Chart.js dynamically upating data using variable
- how to make doughnut chart portions, buttons
- angular-chart add horizontal line
- How to plot multiple value for one X-axis chart.js
- angular-chart.js not rendering any chart
- How do I scrape data in <canvas> element with python or javascript?
- Why my ajax function does not work on yii2
- how to create bar chart with group and sam color for each group using chart.js?
- Is it possible to add image behind doughnut chart with transparency color in ng2chart?
- Chartjs - Loop thru dataset and assign colors
- Bar Chart cannot read data and label in laravel
- Chart.js v2 - combined stacked bar chart and 2 unstacked lines
- what is error can't acquire context from the given item?
- How to dynamically update data of line chart used with chart Js?
- Grab array from div text to plot with ChartJS
- I'm getting the error "TypeError: Cannot read property 'extend' of undefined" when trying to import chartjs-plugin-datalabels
- ChartJS/ ChartJS-plugin annotation set height of vertical line
- Display JSON data in chartjs
- How would i print out HTML Chart.Js Legends using the global parameters
- Char.js Interpolation linear
- Customize Chartjs 2.x tooltip
- Chartjs: Rotate Axis Title
- Is it possible to avoid the shrinking of Chart.js pie charts when accompanied by labels?
- Display data label (legend) in line-chart using chartjs
- How can I remove the white border from Chart.js pie chart when all legends are hidden?