8. Màu Nền Gradient Dọc | Loạt bài về Màu nền của Chart JS

In this video we will focus on creating a linear gradient background color on a bar chart in Chart js. The canvas API allows us to control the color of the bars. With the command createLinearGradient() we can control if we want it horizontally, vertically or diagonal.

This video will focus on a vertical gradient color effect on the bars. In other words, the bar background color will gradually transition from one color to another.

Chart.js is basically a Javascript library which has a ready to use template for the Canvas API. As it is drawing in the canvas using Javascript code that the canvas can understand.

Understanding how to use createLinearGradient() in Chart js for gradient color effect.

The command createLinearGradient() has 4 values that controls the movement of the lines which could be vertical, horizontal or diagonal.

The 4 values to control the color movement are createLinearGradient(x0, y0, x1, y1). These values mean:

x0 = The starting point of the line on the x coordinate. The x coordinate is always from left to right. This would mean that if the width of a canvas is equal to 700 pixels and we have a x0 values of ‘0’. That would indicate that the starting point would be that the very left. If it would be 350, it would mean that the effect would take effect at the center of the canvas.

y0 = The starting point of the line on the y coordinate. The y coordinate is always from top to bottom. The higher the value the lower it would start. If as the example in the video, the height of canvas is equal to 350 pixel. And we want to start the effect at the very top we would set the y0 on ‘0’.

x1 = The width in pixels that would be affected by the createLinearGradient() command. For example, if we want to have full width of gradient color we would set the x0 on ‘0’ and the x1 on ‘700’. So that from left to right the color would impact.

y1 = the height in pixels that would be affected by the createLinearGradient() command. For example, if we want to have full height of gradient color we would set the y0 on ‘0’ and the x1 on ‘700’. So that from top to bottom of the canvas the color would impact.

In the video the focus is on creating only a linear gradient effect on a vertical level. This indicates we only need to adjust the y0 and y1 values. In this case we want to start at the very top which is why we set the y0 to ‘0’. Next, it needs to end at the very bottom of the canvas which is why we set the y1 on ‘350’.

How to do soft coded values for gradient effect in Chart.js

While the current method is set on hard coded pixel values. There is an advance way of doing it with soft-coded values by getting the chartArea object.

Once you understand how to do the hard coded method. It is time to understand the soft coded version. The video below cover this nicely. In that case we need to understand the chartArea objects and get the scales getPixelForTick command to extract the pixel values.