Using Gradient Colors in Data Visualizations

Topic Overview

Purpose

This topic explains how to apply gradient colors to the data visuals in Ignite UI for jQuery™ controls. This capability is supported for the following data visualization controls:

• igBulletGraph™
• igDataChart™
• igLinearGauge™

Required background

The following topics are prerequisites to understanding this topic:

Concept

• Color gradient
• CSS background-image property

Topics

Styling and Theming in Ignite UI for jQuery: This topic provides instructions on setting up your application for design time, options for using CSS in production and an overview on creating or customizing a theme.

Adding igDataChart: This topic demonstrates how to add the igDataChart control to a page and bind it to data.

External Resources

Color Gradient: A Wikipedia article explaining the concept color gradients.

CSS linear-gradient: An article explaining the linear-gradient() CSS function.

In this topic

• Introduction
  • Gradient colors configuration summary
  • Supported gradient types
  • Gradient colors configuration summary chart
• Configuring Linear Color Gradients
• Configuring Gradient Colors Through the API
  • Overview
  • Property settings
  • Example
• Configuring Gradient Colors Through CSS Classes
  • Overview
  • Example
• CSS Classes Reference
  • Introduction
  • igBulletGraph
  • igDataChart
  • igLinearGauge
• Related Content
  • Topics
  • Samples

Introduction

Gradient colors configuration summary

Linear color gradients can be applied to the fill and the outline of the visual objects in data visualization controls.

Gradient colors are configured through the color-related properties of the supported components. This includes specifying the gradient type (e.g. linear) and the color stops. The rest of the configuration properties are specific for each effect type.

Supported gradient types

Currently, only linear gradients are supported.

Gradient colors configuration summary chart

The following table summarizes the possible approaches to configuring gradient colors in data visualizations.

Configuring Linear Color Gradients

Linear gradient colors configuration summary

The main configurable aspects of a linear color gradient effect are its type, direction, and color flow.

Configuring the gradient direction

The default gradient direction is top to bottom, therefore if a custom direction is not specified, the color at offset 0 will be positioned at the top of the figure and the color at offset 1 will be at its bottom. In order to change the gradient direction, start and end point must be specified. The start and end points are the points you want the gradient to start and end at. Both the x- and y- axis coordinates for these points must be in the range 0÷1 where (0, 0) is the top-left corner of a figure’s bounds rectangle and (1, 1) is the bottom-right corner.

Configuring the gradient color flow

In addition to the gradient type, two or more gradient stops must be configured. Each gradient stop must specify a color and an offset from the start point of the gradient, indicating where the color is to be positioned along the imaginary gradient line representing the gradient color flow. The default bearing of the gradient line is vertical with downward direction, i.e. the Start point has co-ordinates are (0,0) and the End point co-ordinates (0,1). More than two gradient stops can be used to achieve custom spreads of the gradient colors.

The following picture shows how the shape of an igDataChart area series is filled with a linear color gradient with a custom angle and illustrates the concepts mentioned above.

Gradient colors can be configured either through the series API or (for some controls) through CSS classes.

Note: If the color is specified both through the API and the CSS classes, the API settings take precedence and will render the respective CSS classes ineffective.

Configuring Gradient Colors Through the API

Overview

Configuring a gradient color though the API is done by setting a JavaScript object specifying a gradient to one of the brush-/color-related properties of the controls that support gradients.

Property settings

The following table maps the configurable aspects of the visual elements related to gradient colors to the property settings that manage them.

Example

The screenshot below demonstrates how an area series in the igDataChart control looks as a result of applying the following gradient color settings for the series:

Following is the code that implements this example.

In JavaScript:

…
brush: {
    type: "linearGradient",
    colorStops: [{
        color: "#FFD800", //orange
        offset: 0
    },
    {
        color: "#FF00DC", //pink
        offset: 1
    }],
    startPoint: { x: 0, y: .2 },
    endPoint: { x: 1, y: .8 }
}

Configuring Gradient Colors Through CSS Classes

Overview

Some of the Ignite UI for jQuery data visualization controls support setting the gradient colors for some of their color-related properties through CSS. In order to specify a gradient color via CSS, you need to create a CSS rule that targets a specified class and sets the background-image property of the visual element to a function specifying the gradient (e.g. linear-gradient). If a CSS gradient color is specified together with a solid color CSS setting, the gradient color setting will take precedence.

Note: If the color is specified both through the API and the CSS classes, the API settings take precedence and will render the respective CSS classes ineffective.

Example

The screenshot below demonstrates a igDataChart control in which the first series is configured through CSS with the following settings:

Following is the code that implements this example.

In CSS:

.ui-chart-fill-palette-1 {
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

CSS Classes Reference

Introduction

The tables below provide reference information for the CSS classes used for configuring gradient colors in data visualizations. The classes are control-specific. They are listed in alphabetical order.

igBulletGraph

igDataChart

igLinearGauge

Related Content

Topics

The following topics provides additional information related to this topic.

• Styling igDataChart: This topic demonstrates how to apply styles and themes to the igDataChart control.

Samples

The following samples provides additional information related to this topic.

• Chart Fill Gradients: This sample demonstrates using linear gradient colors in the igDataChart control.