Styling igCategoryChart

Topic Overview

Purpose

This topic demonstrates how to apply styles and themes to the igCategoryChart™ control.

Required Background

Concepts

• Cascading Style Sheets
• Applying themes by changing linked CSS files

Topics

• Styling and Theming in Ignite UI for jQuery: General information and a procedure for updating styles and themes in Ignite UI for jQuery™ library.

External Resources

• jQuery UI: General information about the jQuery UI library.

• Theming jQuery UI: Provides information on using themes with jQuery UI library.

• jQuery UI CSS Framework: Provides information in the jQuery UI styling framework.

In This Topic

This topic contains the following sections:

• Introduction
• Themes Summary
• Required Cascading Style Sheets (CSS)
  • Required CSS summary
  • Required CSS code: HTML
  • Required CSS code: ASPX
• Chart Styles Reference
• Modifying the Chart-Specific Visual Elements Using Themes
  • Introduction
  • Overview
  • Steps
• Related Content
  • Topics
  • Resources

Introduction

Introduction to themes

The igCategoryChart uses the jQuery UI CSS Framework for the purposes of applying styles and themes. By default, the igCategoryChart uses the IG Theme, which is a jQuery UI theme provided by Infragistics for use in your application. Additionally, the IG Theme has some additional chart specific styles. That means in order to customize the looks of charts a general jQuery UI theme is not sufficient. You will need to provide additional style classes that alter chart specific elements like data series and axes.

To customize a theme, you can use the ThemeRoller tool. This jQuery UI tool facilitates the creation of custom themes that are compatible with the jQuery UI widgets. Many prebuilt themes are available for download and use in your website. The igCategoryChart control supports the use of ThemeRoller themes.

Detailed information for using themes with Ignite UI for jQuery library is available in the Styling and Theming in Ignite UI for jQuery topic.

Note: The base theme of Ignite UI for jQuery is not necessary for charts and you may safely omit it on pages only containing charts.

Themes Summary

A summary of the igCategoryChart control’s available themes.

Required Cascading Style Sheets (CSS)

Required CSS summary

The following CSS resources are necessary to correctly render charts:

• infragistics.theme.css – Contains the IG Theme
• infragistics.ui.chart.css – Contains the Chart Structure classes

In the code snippets that follow, it is assumed that the CSS resources are located in the Content/ig folder below the website or application root.

Note: The following blocks provide information on manually including required CSS files but the recommended way to load these files into your page it to use the Infragistics Loader control.

Required CSS code: HTML

In HTML:

<link href="Content/ig/themes/Infragistics/infragistics.theme.css" rel="Stylesheet" />
<link href="Content/ig/structure/modules/infragistics.ui.chart.css" rel="Stylesheet" />

Required CSS code: ASPX

In ASPX:

<link href='<%= Url.Content("~/Content/ig/themes/Infragistics/infragistics.theme.css")%>' rel="stylesheet" type="text/css" />
<link href='<%= Url.Content("~/Content/ig/structure/modules/infragistics.ui.chart.css")%>' rel="stylesheet" type="text/css" />

Chart Styles Reference

Style reference summary

A summary of the igCategoryChart style’s purpose and functionality.

Note: In all style classes, the border-color setting determines the outline of the corresponding element and the background-color settings determines the background or fill color of the element.

Modifying the Chart-Specific Visual Elements Using Themes

Introduction

Demonstrates how to alter the default settings for various visual elements of the igDataChart control by changing the infragistics.ui.chart.css chart-specific styles.

Use an existing page with a chart, since the procedure for creating a chart is not included for this example. The example shows you how to modify the chart styles.

In this example, we will change the colors of the data series.

Prerequisites

To complete the procedure, you need the following:

• An HTML5 web page with an existing igCategoryChart control

Overview

A high level overview of the process:

1. Copy the default chart CSS file
2. Modify the styles for the chart visual elements
3. Change the link from the default chart CSS file to the modified file
4. Verify the result

Steps

Demonstrate how to modify the default IG Chart styles with your preferred settings.

1. Copy the default chart CSS file.

   Copy the CSS file, with the default chart styles (infragistics.ui.chart.css), from the Ignite UI for jQuery installation folder to the themes folder of your web site or application.

   For instance, if you have a folder Content/themes in your web site or application where keep the CSS files used by the application, then make a copy of the default chart CSS file mentioned above in Content/themes/MyChartTheme/ig.ui.chart.custom.css.

2. Modify the styles for chart visual elements

   Open the copy of the CSS file and make the desired changes to the styles.

   In CSS:

    .ui-chart-palette-1
    {
        border-color: rgb(35, 128, 168);
        border-color: rgba(35, 128, 168, .8);
        background-color: rgb(68, 172, 214);
        background-color: rgba(68, 172, 214, .8);
    }
    .ui-chart-palette-2
    {
        border-color: rgb(51, 51, 51);
        border-color: rgba(51, 51, 51, .8);
        background-color: rgb(73, 73, 73);
        background-color: rgba(73, 73, 73, .8);
    }
    .ui-chart-palette-3
    {
        border-color: rgb(128, 128, 128);
        border-color: rgba(128, 128, 128, .8);
        background-color: rgb(168, 168, 168);
        background-color: rgba(168, 168, 168, .8);
    }
    .ui-chart-palette-4
    {
        border-color: rgb(24, 81, 112);
        border-color: rgba(24, 81, 112, .8);
        background-color: rgb(33, 110, 153);
        background-color: rgba(33, 110, 153, .8);
    }
    .ui-chart-palette-5
    {
        border-color: rgb(135, 153, 34);
        border-color: rgba(135, 153, 34, .8);
        background-color: rgb(164, 186, 41);
        background-color: rgba(164, 186, 41, .8);
    }
    .ui-chart-axis
    {
        border-color: #989EA3;
        background-color: #989EA3;
    }
    .ui-chart-legend-items-list
    {
        padding: 10;
        margin: 5px;
    }
    .ui-chart-legend-item-text
    {
        vertical-align: text-bottom;
    }
    .ui-chart-legend-item-badge
    {
        vertical-align: baseline;   
    }
    .ui-chart-tooltip
    {
        -moz-box-shadow: 5px 5px rgba(0,0,0,0.5);
        -webkit-box-shadow: 5px 5px rgba(0,0,0,0.5);
        box-shadow: 5px 5px rgba(0,0,0,0.5);
    }
   

3. Change the link from the default chart CSS file to the modified file.

   Update the link to the default chart CSS file to point to the CSS file modified in the previous step.

   In HTML:

    <link href="/Content/themes/MyChartTheme/ig.ui.chart.custom.css" rel="Stylesheet" type="text/css" />
   

   In ASPX:

    <link href='<%= Url.Content("~/Content/themes/MyChartTheme/ig.ui.chart.custom.css")%>' rel="stylesheet" type="text/css" />
   

4. Verify the result.

   To verify that the chart colors and styles changed, save the web page and open it in your browser.

Related Content

Topics

The following topics provide additional information related to this topic.

• igCategoryChart Overview: Conceptual information about the igCategoryChart control.

• Adding igCategoryChart: Demonstrates how to create the igCategoryChart control and bind it to data.

Resources

The following third party material provides additional information related to this topic.

• jQuery Themeroller: Provides jQuery UI themes for preview and download.