[SAPUI5] Chart.js - Bar Chart with Gradient color and hide grid lines (background)

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