score:0
i am not seeing anywhere in the code you posted, the mention of specifying color scheme...
per the official documentation found @ http://www.chartjs.org/docs/latest/, you need to do the following --- tweak it as needed
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
backgroundcolor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
bordercolor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderwidth: 1
}]
},
put the above before options: {
score:0
you can call this function which generates random colors for each bars:
var randomcolorgenerator = function () {
return '#' + (math.random().tostring(16) + '0000000').slice(2, 8);
};
var barchartdata = {
labels: ["your label sets"],
datasets: [
{
label: "my first dataset",
fillcolor: randomcolorgenerator(),
strokecolor: randomcolorgenerator(),
highlightfill: randomcolorgenerator(),
highlightstroke: randomcolorgenerator(),
data: [your datasets]
}
]
};
Source: stackoverflow.com
Related Query
- Change color according to data in pie chart.js
- chartjs datalabels change font and color of text displaying inside pie chart
- Angular 8 & ChartJs change color in pie chart
- change stroke line color in chart according to datasets in react native
- Cannot change the color of column chart according to its value
- Change the color of displayed values in pie chart
- Chartjs random colors for each part of pie chart with data dynamically from database
- How set color family to pie chart in chart.js
- How to display data labels outside in pie chart with lines in ionic
- Show "No Data" message for Pie chart with no data
- chart.js bar chart color change based on value
- Custom data in label on ChartJS pie chart
- Use transparent stroke color with chartjs pie chart
- Chart.js color change of the data points
- Change Axis Line color in Chart created using chart.js
- How to change color of column in chart js
- PrimeFaces PolarArea Chart - GridLine Color Change
- Display data labels on a pie chart in angular-chart.js
- Change the background color of tooltip dynamically using chart color
- Chart.js Bar Chart with a switch/radio button to group data / Troubleshooting bar color
- How to change the chart line or area colors according to the user need?
- ChartJS 2.6 - Change color of bar in Bar chart programmatically
- How to change background color of labels in line chart from chart.js?
- How to style a pie chart in chart js? I want to change the border color, border width and give them shadow
- How to change color by clicking on the chart bar?
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- Updating a Pie Chart in React as Data is Entered
- ChartJS - How to change color of some data points in graph
- Make chartjs pie chart wiyh dynamic data
- How to change the color of the bar in barchart if the data is negative - Angular Charts
More Query from same tag
- Custom dataset object not setting chart.js bar chart colors in Angular 6
- how to hide 0 value on Yaxis in Chart.js with negative values
- Implementing range slider in Chart.js
- Is it possible to update the width of a chart in chart.js?
- How to update Chart.js based on dropdown list?
- Horizontal line syncing across multiple charts when hovering with Chart.js in Typescript-react
- how do I make chart.js smaller? (html, chart.js)
- Hide Chart.js bubble points based on filtering
- Angular 2 ng2-charts donut add text
- How to manipulate data in react-chartjs-2
- Chart.js and Firebase Ionic App Angular 4
- Chart.js -> line chart -> multiple points with the same X
- My chart won`t live update - done in Chart.js and Java Script
- Chart tooltip should show the consolidated information of a single bar in double bar chart
- How to plot object to charts.js
- How can I show "No Data" message in Pie Chart when there is no data using VueJS?
- How to add an end line to my graph using Chart.js?
- How can I force the ".0" portion of a value to explicitly display (Chart.JS)?
- How do we put labels on pie chart arcs - chart.js/vue-chart.js
- Updating chart.js based on selections from dropdown
- Dropdown component not having effect in Chromium browser
- Parse an object to chart.js instead of arrays?
- Multiple Charts of the Same Type in ChartJS2 ReactJS - Buggy Tooltips
- ERROR TypeError: "this.canvas is undefined" | Problem with creating a chart with angular and chart.js
- How do i programmatically set bar fillColor in chartJs + angular
- chart.js API returns bad x and y points
- Chart.js Thick label gets replaced by three dots
- Horizontal bar with two yaxes chart js
- How to use plugins in chartjs and laravel chart consoletvs/chartsjs
- How to dynamically change the annotation value in Chart.js