Making A Custom Gradient For ChartJS

Having a dependable set of tools at your disposal is a must. For me, ChartJS has been one of those tools when I’m in need of dynamic charts. Here’s an explanation on how I customized the fill color for the WATH project sent to me by Theron Studios along with a small tip for loading charts smoothly on initial page load.

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 WATH Interface designed by Theron Studios & Developed with ChartJS.

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.

See the Pen Custom ChartJS Gradient by Dennis Gaebel (@grayghostvisuals) on CodePen.1395

CodePen demo of ChartJS with the custom fill gradient. Hit rerun to see how the chart behaves on page load.

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.

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2015/06/10