score:1
Accepted answer
I did a similar thing using gradientStroke command, then applying this to the backgroundColor:
var ctx = document.getElementById("YearsExperience").getContext("2d");
var gradientStroke = ctx.createLinearGradient(0, 1200, 0, 0);
gradientStroke.addColorStop(0, "#80b6f4");
gradientStroke.addColorStop(0.2, "#94d973");
gradientStroke.addColorStop(0.4, "#80b6f4");
gradientStroke.addColorStop(1, "#94d973");
var YearsExperience = new Chart(ctx, {
type: 'bar',
data: { labels: ArrLabel[idx], datasets: [{ label: 'Years of experience', data: ArrData[idx], backgroundColor: gradientStroke }] },
options: { scales: { xAxes: [{gridLines: {display:false}}], yAxes: [{ ticks: { beginAtZero:true } }] }, events: ['none'],animation: { easing: "easeInOutBack" } }
});
An example of the output can be seen here: http://neophytte.mine.nu/portfolio/skills.html
Source: stackoverflow.com
Related Query
- Can I set different fill color based on a given threshold in Chart.js?
- Chart Js - Globally set bar chart color based on value
- angular chart js set fill color of bar chart
- How set color family to pie chart in chart.js
- Chart.js line chart set background color
- Chart.js Line, different fill color for negative point
- set background color to save canvas chart
- Different color for each column in angular-chartjs bar chart
- chart.js barchart without set fill color
- Can I specify a different font size for each row of text in Chart Title?
- how to set chart.js grid color for line chart
- chart js - Apply different color for each x-axes label
- How to dynamically set ChartJs line chart width based on dataset size?
- chart.js bar chart color change based on value
- Chart.js different scaleLine color of radar chart (angular)
- How to set single color on each bar in angular chart js
- How to add area with break on line chart with fill color
- How to use segment property to color line / border color based on value in chart js?
- 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?
- Can the colors of bars in a bar chart be varied based on their value?
- Can you set seperate colors for different axes in Chart.js?
- Chartjs Different Fill Color For Overlap Area
- How can i give the full Legend a background color in chart js?
- Is there a way to give a pie chart in chart.js a different color outer border than the border color between segments?
- angular-chart.js custom color based on chart label values
- 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
- Is it possible to set the background color of a sector in a radar chart in Chart.js?
- chart.js bar chart change color based on value
More Query from same tag
- Object.values not seperated by parentheses / Chartjs only displays first element of array
- Angular 7, chart.js even when chart replaced, remaining chart in background which appears sometimes when mouseover
- chart.js - Disable labels
- Chart.js after ajax refresh there are two charts in the same container (new and old)
- Flask with Chart JS Scatter Plot struggle
- Returning fetched JSON correctly but can't get it into Chart.JS
- Chartjs with Node.js : Unexpected token <
- Chart.js Bar Chart coloring Technique
- updating a chart in chart.JS using a dropdown button
- ChartJS canvas not displaying colors in edge browser
- Passing data from Python to JavaScript to plot Chart.js
- VueJS TypeScript using ChartJS - Parsing error: '}' expected
- Use chartjs-plugin-annotation 0.5.7 in Chartjs 2.9.x with React
- Chart.js LineChart how to show only part of dataset and support horizontal scrolling
- How to navigate tooltips popup by clicking custom buttons outside Chart.js v2 canvas?
- ChartJS: Blank page | what is going wrong?
- Draw data in graphics generated by Chart JS
- How to create two pie charts using Chart.js API?
- onClick : handleClick
- Chartjs and dynamic data arrays
- Chart JS attempt to stacked bar chart tooltip for only one dataset
- How to expand the "Y" scale of the data in chart.js?
- chart js same label, multi data
- Why can't I update the aspectRatio within the chartjs chart?
- Rotate left legend chartjs
- PHP/Laravel - Chartjs implode does not function
- chartjs 2.7 how to add labels in center of horizontal bar graph
- How to add labels into Chart.js canvas plugin?
- Chart.js plot not aligned with xAxis labels
- Chart.js 2.0.0-beta2 disable points on line Charts