Full width home advertisement

IT Sharing

Travel the world

Climb the mountains

Post Page Advertisement [Top]


If you're bored with the color of Bar in ChartJS just one color, don't worry I'll help you make it different by using Gradient color and transparent background, just some simple step.
*Make gradient color for bar chart :
+ Just using createLinearGradient function of chart js to create gradient
var chart    = document.getElementById('chart').getContext('2d'),
var gradient = ctx.createLinearGradient(0, 0, 0, 450);
gradient.addColorStop(0, '#e83e8c');
gradient.addColorStop(0.5, '#6f42c1');
gradient.addColorStop(1, '#6610f2');
and add gradient color to background of data object in datasets

*Mak transbarent background just set gridlines
display: false, //remove grid line
  drawBorder: false //remove main line 

See sample and try your self here: https://codepen.io/leotrinh/pen/eYpoLwG
If you like bar chart with rounded top you can also read this post: http://blog.tinhtd.info/2020/05/sapui5-chartjs-bar-chart-with-rounded.html

Không có nhận xét nào:

Đăng nhận xét

Bottom Ad [Post Page]