Insights Canvas: Canvas Style

There are a variety of options for styling your Insights Canvas. These range from simple color changes all the way to customizations using CSS and JavaScript code.

To access the Canvas Style toolbar, hover-over and click the picture icon located in the upper-left of the canvas. This toolbar will provide you with many of the customization options that are available in the SurveyGizmo Standard Report.

Apply a Pre-Built Theme to Your Canvas

Get started styling your Insights Canvas by exploring our Pre-Built Themes. Navigate to Canvas Style > Theme > Pre-Built Themes and click a theme thumbnail to see it applied to your canvas.

Apply a Background Image or Background Color

Click the Background option in the left-hand panel of your Insights Canvas to provide a background image or to change the background color. 

To add a background image, click Select Background Image. You can then choose to either use an image that was previously uploaded to your File Library, or to upload an image. If you prefer to use a solid background color, you can choose from our quick colors, use the color wheel, or enter a specific HEX Code if you have it handy.

Alternately, if you want SurveyGizmo to import colors from an image or perhaps from your company's website, you can use the From Image or From Webpage options. SurveyGizmo will provide you with a color palette based on the colors found in the image/webpage:

Customize Your Chart Colors

Click Chart Colors in the left-hand panel of your Insights Canvas to get started customizing the colors that are used in the charts throughout your canvas.

Pre-built Color Sets

Under Pre-built Color Sets, there are color palettes galore. Be sure to scroll down to see all of the options. You can select a quick color palette that you like and then go to the Chart Colors section to further customize by adding, removing, or adjusting the existing colors in that palette.

Remove a color

If you wish to remove a color from being used in any of your charts, select it and click the x remove color link.

Add a color

To add a color select an empty cell in your current color list and then choose from our quick colors, use the color wheel, or enter a specific HEX Code if you have it handy.

Reorder your colors

Colors will be used in your charts in the order they are listed. If you wish to reorder your colors, click, hold and drag colors to the desired location.

Customize Text Font, Size, and Color

Under the Text options in the left-hand sidebar panel of your Insights Canvas, you can customize the font, font size, font weight, and color of your Body Text.

Advanced > Canvas Options

The Advanced> Canvas Options settings under Canvas Style allow you to make further look and feel adjustments to your Insights Canvas.

Size

When you initially created your Insights Canvas, you had the option of selecting the canvas size. Via Canvas Options > Size, you can change your original size setting and even set a custom Width & Height.

Snap to Grid

Depending on how precisely you need to control the placement of your Insights Canvas elements, there are a couple of options available via the Snap to Grid setting.

When you select, Use snap to grid, SurveyGizmo uses an invisible grid to line up the items on the screen along perfect horizontal and vertical lines. A dot grid will be visible when moving elements with this setting enabled.

This is a great option if you are using multiple elements and want to ensure that they are placed along the same horizontal or vertical axis.

When Use snap to grid is disabled, you can drag and drop canvas elements freely to place them exactly where you see fit.

Advanced > Custom Code

Access the Canvas Style > Advanced > Custom Code section to make look and feel modifications using your own Custom CSS or to implement Custom JavaScript to interact with your canvas elements. This is a great way to add animation to your canvas elements:

Use CSS or JavaScript to target elements that you have added to your Insights Canvas.

Each Insights Canvas element has a unique Class Name that you can reference in Custom CSS. You can also add your own class name to each element. To add a custom class name or obtain the default class name, edit the element and click on the Layout & Options tab. Under Class Name you can specify your own class or use the selector provided below this field.

JavaScript: Listen for Events

Insights Canvas emits two custom events that you can listen for using JavaScript:

  • load
  • update - (only called when data changes)

You can target these events in your JavaScript to make dynamic changes to your Insights Canvas elements.

Load Event

The load event is emitted each time your Insight Canvas reloads (every five minutes). Use JavaScript to listen for this event and make dynamic changes to your canvas, if needed. For example:

$(document).ready(function(){
  var element = $("#exampleID");
  element.on("load", function(e){
  console.log("The canvas has reloaded", e);
  })
});

Update Event

The update event is emitted when your Insight Canvas reloads and data presented on the canvas has been updated since the last reload. This event is compatible with the following element types:

The update event sends the following parameters:

ParameterDescription
detail.newDataAn object of the changed data
detail.previousDataAn object of the data prior to the most recent update

Use JavaScript to listen for this event and make dynamic changes to your canvas, if needed. For example:

$(document).ready(function() {
  var element = $("#exampleID");
  element.on("update", function(e){
  //nps question example
  //below example will only work on modern browsers which support es6
  let { newData, previousData } = e.detail;
  if ( newData.nps_score > previousData.nps_score ) {
    element.css('color: green;');
  }
  console.log("The question's data has been updated", e);
  })
});


Basic Standard Market Research HR Professional Full Access Reporting
Free Individual Team & Enterprise
Feature Included In