score:7
the gradient direction (vertically in your case) not related directly to chart.js
, but to html canvas createlineargradient() method.
createlineargradient
javascript syntax:
context.createlineargradient(x0,y0,x1,y1);
https://www.w3schools.com/tags/canvas_createlineargradient.asp
example of top to bottom "vertically" gradient from w3schools:
var c = document.getelementbyid("mycanvas");
var ctx = c.getcontext("2d");
var my_gradient = ctx.createlineargradient(0, 0, 0, 170);
my_gradient.addcolorstop(0, "black");
my_gradient.addcolorstop(1, "white");
ctx.fillstyle = my_gradient;
ctx.fillrect(20, 20, 150, 100);
<div>top to bottom</div>
<canvas id="mycanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
"one gradient"
docs:
an alternative option is to pass a canvaspattern or canvasgradient object instead of a string colour. https://www.chartjs.org/docs/latest/general/colors.html#patterns-and-gradients
same as one solid color but passing canvasgradient
object:
var bar_ctx = document.getelementbyid('chart').getcontext('2d');
var background_1 = bar_ctx.createlineargradient(0, 0, 0, 600);
background_1.addcolorstop(0, 'red');
background_1.addcolorstop(1, 'blue');
and set background_1
under data
/* data */
var data = {
labels: ["africa", "asia", "europe", "america"],
datasets: [{
/* data */
label: "population (millions)",
backgroundcolor: background_1,
data: [40,60,80, 100]
}]
};
"multiple colors for bars"
use multiple gradients objects inside backgroundcolor (object1 for item-1 and so on).
backgroundcolor: [background_1, background_2, background_3, background_4],
** my code is not dry (the best idea her is to create gradient objects by some loop throw array of data). by purpose i keep this example "simple".
var bar_ctx = document.getelementbyid('chart').getcontext('2d');
var background_1 = bar_ctx.createlineargradient(0, 0, 0, 600);
background_1.addcolorstop(0, 'red');
background_1.addcolorstop(1, 'blue');
var background_2 = bar_ctx.createlineargradient(0, 0, 0, 600);
background_2.addcolorstop(0, 'green');
background_2.addcolorstop(1, 'orange');
var background_3 = bar_ctx.createlineargradient(0, 0, 0, 600);
background_3.addcolorstop(0, 'orange');
background_3.addcolorstop(1, 'purple');
var background_4 = bar_ctx.createlineargradient(0, 0, 0, 600);
background_4.addcolorstop(0, 'green');
background_4.addcolorstop(1, 'violet');
/* data */
var data = {
labels: ["africa", "asia", "europe", "america"],
datasets: [{
/* data */
label: "population (millions)",
backgroundcolor: [background_1, background_2, background_3, background_4],
data: [40,60,80, 100]
}]
};
var options = {
responsive: true,
title: {
text: 'multiple colors for bars',
display: true
},
scales: {
xaxes: [{
stacked: true,
ticks: {
},
}],
yaxes: [{
stacked: true,
}]
}
};
var mychart = new chart(document.getelementbyid("chart"), {
type: 'bar',
data: data,
options: options
});
<canvas id="chart" width="800" height="600"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
score:0
try to click one of the jsfiddle there, then change the chart type to 'bar'. you'll see it will work.
yes they are all the same color, because on their example they are only using one gradient. you can create multiple gradient with different color and apply it seperately since you are using multiple rgba already, you can change it and apply specific gradient to your bar. my english is not that good i hope you get my point.
Source: stackoverflow.com
Related Query
- Chart.js - Add gradient to bar chart
- Add DataSet Bar Chart - Chart.JS
- ChartJS add tooltip to a grouped bar chart
- How to add second Y-axis for Bar and Line chart in Chart.js?
- how to add a title to my ng2-charts bar chart
- How to add gradient background to Line Chart [vue-chart.js]
- Add a custom label to the top or bottom of a stacked bar chart
- How to add background image in bar chart column in Chart.js?
- How to show gradient vertically on chart js grouped bar chart?
- Add HTML to label of bar chart - chart js
- Add Labels to Chart.js Bar Chart
- Horizontal gradient for every single bar in group chart js
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- chart js bar chart add animation to change color
- How to add unused data background to bar in chart js
- ChartJS add custom tooltip to a stacked bar chart
- How to add labels on top of the chart bar with Chart.js 2
- Chart.js - Add gradient to line chart background
- Add images inside bar chart in chart.js
- How to add custom text inside the bar and how to reduce the step size in y axis in chart js( Bar chart )
- chartjs add dots to bars in grouped bar chart
- Chartjs Bar Chart add background color to value labels
- Add bar chart in a column
- How to add data labels in each bar in stacked bar chart in chart.js?
- How to add label square to Bar Chart using Chart.js
- Add a click event to the bar chart of chartjs
- How to add vertical line in bar chart using chartJs and ng2-charts?
- How to add text inside the doughnut chart using Chart.js?
- chart js 2 how to set bar width
- Chartjs Bar Chart showing old data when hovering
More Query from same tag
- Chart.js making this chart more readable / scrollable
- React-Chart.js legend onClick function
- ChartJS linechart edit yAxis labels
- Can not read property 'Concat' of Undefined
- How to correctly passed php mysql data to ChartJs
- Re-compile JSON data to make less rows
- How to make chartjs pie chart responsive
- Change legend style from bar to line chart.js 2.4.0
- Why chart renders after second click - react-chartjs-2
- How to set responsive width and height of canvas?
- syntax error, unexpected ' ' Laravel 5.6 ConsoleTvs chart js
- Trouble using utcoffset with Chart.js
- ChartJS: how to change data in hover box?
- Chart.js after ajax refresh there are two charts in the same container (new and old)
- Completely hide the Y-axis on chartjs when data is hidden
- Chartjs doc examples are lightning fast but same code is slow when reproducing
- Chart.js v3 after using of zoom plugin instance persist in memory
- return percentage in chart.js (v2+) legend
- ChartsJS bar chart with HH:MM:SS format
- How to use icon as legend in Chart.js?
- ChartJs Bubble chart - on hover bubble becomes too big
- Horizontal xAxis labels in Chart.js
- Chart.js remove gridline
- Php array and chartjs
- Chart.js not initiating
- Non-static values for chart using CanvasJS?
- Display multiple data into chart.js
- ChartJS - Override Attributes (AngularJS)
- Initializing Chart Js Multiple times for and Array of Objects
- Chart.js customization, two Y-Axis overlay, chart area padding, odd tick padding