Enhancing CanvasJS Column Charts with Gradient and Pattern Filling

Data visualization is an essential aspect of conveying information effectively. Charts not only make data more accessible but also enhance its aesthetic appeal. CanvasJS, a JavaScript library, provides a powerful tool for creating interactive and beautiful charts. In this article, let’s explore how to enhance the appearance of a CanvasJS column chart by adding gradient and pattern fillings to datapoints.

Getting Started with CanvasJS

Before diving into the gradient and pattern filling, let’s set up a basic column chart using CanvasJS. To get started with CanvasJS, we’ll create a simple column chart. In this example, we have two sets of data: one representing sales figures and the other representing user engagement. Here’s how to create the chart:

var chart = new CanvasJS.Chart("chartContainer", {
  theme: "light2",
  title: {
    text: "Adding Gradient & Image in Column Chart",
  },
  data: [
    {
      type: "column",
      dataPointBackground: "linear-gradient(#e66465, #9198e5)",
      dataPoints: [
        { x: 10, y: 171 },
        { x: 20, y: 155 },
        { x: 30, y: 150 },
        // ... other data points
      ],
    },
    {
      type: "column",
      dataPointBackground: "url(https://images.unsplash.com/photo-1572756317709-fe9c15ced298) center center/cover",
      dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55 },
        { x: 30, y: 50 },
        // ... other data points
      ],
    },
  ],
});

chart.render();

In this code, we create CanvasJS multi-series column chart. What makes this chart particularly interesting is the use of dataPointBackground property. This property in chart.options allows us to use it define CSS background like gradient / background-image that we like to show as datapoint.

Adding Gradient /Pattern Filling

One of the creative ways to enhance your chart is by using gradients / pattern as datapoint. In the first dataseries, we have passed a linear gradient for dataPointBackground property. Similarly, an image has been set as background inthe second dataseries.

dataPointBackground: "linear-gradient(#e66465, #9198e5)"

This creates a gradient background that transitions from #e66465 to #9198e5. You can customize the colors and direction of the gradient to match your design preferences.

dataPointBackground: "url(https://images.unsplash.com/photo-1572756317709-fe9c15ced298) center center/cover"

The image is centered within each data point and covers the entire area. This approach is useful when you want to represent data points with specific images or patterns.

Customizing Data Point Look

Now, lets uncover the magic behind the scenes — customizeDataPointLook method does it for you. This method is responsible for meticulously crafting the look and feel of individual data points.

function createElement(type, parent, className, style) {
  var element = document.createElement(type);
  element.setAttribute("class", className);
  element.setAttribute("style", style);
  if(parent)
   parent.appendChild(element);
  return element;
}

function customizeDataPointLook(chart) {
  chart.options.dpsDOM = [];
  var dpDOM, dsDOM, dpsWidth, i, j, xVal, yVal, diff;
  chart.options.dataContainer = createElement("div", null, "chart-dps-container", "position: absolute; display: block; pointer-events: none; width: " + chart.width + "px; height: " + chart.height + "px;");
  
  chart.canvas.parentNode.insertBefore(chart.options.dataContainer, chart.canvas.nextSibling);

  for(i = 0; i < chart.data.length; i++) {
    dsDOM = createElement("div", chart.options.dataContainer, "ds-dom-" + i);
    chart.options.dpsDOM[i] = [];
    for(j = 0; j < chart.data[i].dataPoints.length; j++) {
      dpDOM = createElement("div", dsDOM, "dp-dom-" + i, "position: absolute;");
      chart.options.dpsDOM[i].push(dpDOM);
      positionDP(dpDOM, chart, i, j);
    }
  }
}

function positionDP(dpDOM, chart, i, j) {
  xVal = chart.data[i].axisX.convertValueToPixel(chart.options.data[i].dataPoints[j].x);
  yVal = chart.data[i].axisX.bounds.y1;
  diff = chart.data[i].dataPoints[1].x - chart.data[i].dataPoints[0].x;
  dpsWidth = ((chart.data[i].axisX.bounds.x2 - chart.data[i].axisX.bounds.x1) * (diff / Math.abs(chart.data[i].axisX.range)) / chart.data.length * 0.9);

  dpDOM.style.height = chart.data[i].axisX.bounds.y1 - chart.data[i].axisY.convertValueToPixel(chart.data[i].dataPoints[j].y) + "px"; dpDOM.style.width = dpsWidth + "px";
  dpDOM.style.top = yVal - (yVal - chart.data[i].axisY.convertValueToPixel(chart.data[i].dataPoints[j].y)) + "px"; dpDOM.style.left = xVal - (chart.data.length * dpsWidth / 2) + (i * dpsWidth) + "px";
  dpDOM.style.background = chart.options.data[i].dataPointBackground;
}

• createElement: This function creates an HTML element with the specified type, class-name and inline style. It is used to create various DOM elements throughout the code.
• customizeDataPointLook: This function is used to customize the appearance of datapoints in the chart. It creates DOM elements for each datapoint, fill it with the gradient / image that was defined using dataPointBackground property and call positionDP method to position datapoints.
• positionDP: This function positions individual datapoint within the chart. Basically, it overlays the custom DOM with gradient / image on top of the existing column.

Customization and Further Enhancements

CanvasJS lets you create stunning and interactive charts with ease. By infusing gradient and pattern filling into column charts, you can elevate your data presentations to new heights. You can further customize chart by changing colors, fonts, labels and interactivity to suit your specific needs. Additionally, the library supports responsive design, making it ideal for creating charts that adapt to different screen sizes.

JSFiddle: https://jsfiddle.net/vishwas_r/4snvrgfo/

In addition to applying gradient and pattern fills to regular column charts, you can also enhance stacked column charts with these effects. This allows for improved visual distinction across different series in the stack.

JSFiddle: https://jsfiddle.net/vishwas_r/3hgtfjep/