The Design

In order to follow the design sent over I needed to find a way to create a custom gradient due to the fact that ChartJS doesn’t support this type of customization by default. Since the red was so hot I wanted to make sure I got it just right.

The Setup

I did some research and came across what’s called the createLinearGradient method. Linear gradients for canvas are defined by an imaginary line specifying the direction of the gradient. Once created, colors can be inserted using the addColorStop property.

Here’s the code of importance pulled out of context. The following line initially defines the red gradient in the chart above.

var gradient = chart.createLinearGradient(0, 0, 0, 450);

The 4 arguments that have values passed in (0, 0, 0, 450) help define the co-ordinates of this gradient. These four arguments represent the starting points (x1, y1) and ending points (x2, y2) of the gradient.

var data  = {
  var datasets: [
    {
      fillColor: gradient
    }
  ]
};

According to the ChartJS documentation a chart must establish an object literal of a data set that includes a key for defining the chart’s fill color. In the example above I’m passing the gradient variable defined earlier as the fill color to use.

Adding Color Stops

The final piece is adding color stops otherwise the gradient will be completely invisible.

gradient.addColorStop(0, 'rgba(255, 0,0, 0.5)') // show this color at 0%;
gradient.addColorStop(0.5, 'rgba(255, 0, 0, 0.25)'); // show this color at 50%
gradient.addColorStop(1, 'rgba(255, 0, 0, 0)'); // show this color at 100%

Color stops help determine the color and offset values of the gradient. The first argument accepts a value between 0 and 1 and the second argument accepts the color value. Once a gradient has been created these stops are placed along the canvas to determine how colors are distributed.

I’ve tried to find a great explanation with the first argument of the addColorStops property and in my own words it can be thought of like this;

The offset argument for addColorStop can accept an integer between 0 and 1. These values can be thought of as percentages or distances from the beginning point of the gradient until the next color stop.

Maintain Height on Page Load

By default, the height of chart’s collapse on initial page load. In order to work around that and contain the space a trick must be implemented that’s also used by many responsive video plugins.

<div class="aspect-ratio">
  <canvas id="chart"></canvas>
</div>

The chart is wrapped with a div tag and given a class of aspect-ratio. This will allow the chart height to collapse and open up for the next part which is adding it’s padding in percentage.

.aspect-ratio {
  height: 0;
  padding-bottom: 50%; /* 495h / 990w : Intended Proportion */
}

The space will now be preserved on page load plus maintain the aspect ratio when the browser is resized. Feel free to plugin your own value depending on the chart dimensions desired.

Additionally

I’ve taken the liberty of putting together a collection on CodePen containing examples of beautiful, dynamic charts. Chris Coyier also has a really bad ass collection of charts you certainly must checkout. Feel free to leave me a comment or let me know what your favorite tool is for dynamic charts. Are you a D3 user? Let me know in the comments.