Check Out the Chart.js Course: Chart.js, The Missing Manual Course

# 8. Background Color Gradient Vertical | Chart JS Background Color Series

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.