score:6
Accepted answer
I have created a fiddle based on your code. First click on Elements button for filling data. I have changed the color of a bar when clicking on Sort button.
Please check the Fiddle
score:9
Try this:
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
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
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
As mentioned on Documentation
Source: stackoverflow.com
Related Query
- chart.js bar chart color change based on value
- ChartJS 2.6 - Change color of bar in Bar chart programmatically
- chart js bar chart add animation to change color
- chart.js bar chart change color based on value
- Chart JS - Change the color of the last element in a Bar Chart
- Chart.js Change color of the values *inside* the bars of a Bar chart
- How to change bar color on a angular-chart and chart js bar graph with multiple datasets?
- Change Vertical Line and Color bar chart in bar chart.js
- chartjs datalabels change font and color of text displaying inside pie chart
- Chart.js change color of Bar
- Chart.js bar chart : Grid color and hide label
- Different color for each column in angular-chartjs bar chart
- angular-chart.js bar chart with 100% opacity color
- ChartJS click on bar and change it's background color
- Angular 8 & ChartJs change color in pie chart
- How to set single color on each bar in angular chart js
- How to change Chart.js horizontal bar chart Width?
- how to change color of bar if its goes above avg score in mixed graph chart.js
- Change Axis Line color in Chart created using chart.js
- change stroke line color in chart according to datasets in react native
- How to change color of column in chart js
- PrimeFaces PolarArea Chart - GridLine Color Change
- How to use set the color for each bar in a bar chart using chartjs?
- Change the background color of tooltip dynamically using chart color
- How to draw multiple color bar in a bar chart using chart.js
- Chart.js Bar Chart with a switch/radio button to group data / Troubleshooting bar color
- How to change background color of labels in line chart from chart.js?
- How to change color by clicking on the chart bar?
- Change bar color depending on value
- Chart Js - Globally set bar chart color based on value
More Query from same tag
- How to properly feed data to ChartJS with different number of x(labels) and y(data) points
- chart.js wide bar with time scale
- Horizontal Bar-Chart in angular-chart.js
- How to create multiple y-axis time series chart
- How to subscribe to elements in a response object
- NuxtJS ChartJS Gradient Color doesnt apply
- Chart.js legend style
- How to filter and add multiple datasets using Django and Chart.js
- Angular-Chart-JS - Line chart with different fill colors according to points' range
- Chart content not getting loaded in popup
- How do you limit the blur in a linear gradient on a canvas?
- Angular- Chart.js, how off opacity in line chart?
- how to make scrollable the legends of pie chart ( chart js )
- vue.js vue-chartjs chart not updating when chartData replaced, updated etc
- Annotation events not update the chart
- Chartjs box plot with Y-axis negative values
- Chart.js remove zero value sector in pie chart
- vue-chartjs with chartkick vertical bar chart
- How can I remove the grid line in the background of the line chart?
- How to fill my chart (chart.js) with my own data from API
- How to change fonts and axis labels for Chart.js image rendering with QuickChart?
- ChartJS / Chartjs-plugin-annotation How to draw multiple vertical lines using an array?
- I want to change color of individual bar of bar graph
- How to change color of column in chart js
- Customize legend AngularJS
- Chart.js limit the display size of the chart
- Chart.js: Bar Chart Click Events
- Chart.js ignoring canvas height & width
- I want to bind the legend option with checkbox(show legend or not)
- How to make intermittent lines to represent periods of presence and absence on a given line during it's length on Multi Axis chart?