Themes
Send Feedback

Glossary Item Box

Topic Overview

Purpose

This topic provides a conceptual overview of the supported themes available in the IGChartView™ control.

In this topic


Introduction

Theme summary

Use chart themes to give a chart a consistent and color coordinated look and feel. Simply set the IGChartView theme property to one of the predefined themes.

Theme types

The following table contains the supported themes and their associated type name from IGChartDefaultThemes or IGChartGradientThemes.

Theme Name

Preview

DefaultTheme

IGTheme

IGThemeDark

DarkTheme1

DarkTheme2

DarkTheme3

DarkTheme4

IGTheme

IGThemeDark

FinanceTheme1

FinanceTheme2

FinanceTheme3

FinanceTheme4

FinanceTheme5



Creating a Custom Theme – Code Example

Description

The following code creates a new IGChartThemeDefinition object and adds several IGChartPaletteItem objects to the seriesPalettes collection found on the IGChartThemeDefinition.

Code

In Objective-C:

IGChartThemeDefinition* def = [[IGChartThemeDefinition alloc]init];
    def.font = [UIFont fontWithName:@"Helvetica" size:12];
    def.fontColor = [[IGBrush alloc] initWithR:0 andG:0 andB:0 andA:1];
    
    def.legendFont = [UIFont fontWithName:@"Helvetica" size:12];
    def.legendFontColor = [[IGBrush alloc] initWithR:0 andG:0 andB:0 andA:1];
    def.legendBorderThickness = 1;
    def.legendPalette = [[IGChartPaletteItem alloc]init];
    def.legendPalette.color = [[IGBrush alloc] initWithR:0.9 andG:0.9 andB:0.9 andA:1];
    def.legendPalette.outlineColor = [[IGBrush alloc] initWithR:0.7 andG:0.7 andB:0.7 andA:1];
    
    IGChartPaletteItem* item1 = [[IGChartPaletteItem alloc] init];
    item1.color = [[IGBrush alloc] initWithR:0 andG:.63 andB:.88 andA:1]; 
    item1.outlineColor = [[IGBrush alloc] initWithR:0 andG:0 andB:0 andA:1]; 
    [def.seriesPalettes addObject:item1];
    
    IGChartPaletteItem* item2 = [[IGChartPaletteItem alloc] init];
    item2.color = [[IGBrush alloc] initWithR:.54 andG:.6 andB:.05 andA:1];
    item2.outlineColor = [[IGBrush alloc] initWithR:0 andG:0 andB:0 andA:1];
    [def.seriesPalettes addObject:item2];
    
    IGChartPaletteItem* item3 = [[IGChartPaletteItem alloc] init];
    item3.color = [[IGBrush alloc] initWithR:.94 andG:.3 andB:.05 andA:1];
    item3.outlineColor = [[IGBrush alloc] initWithR:0 andG:0 andB:0 andA:1];
    [def.seriesPalettes addObject:item3];
    
    IGChartPaletteItem* item4 = [[IGChartPaletteItem alloc] init];
    item4.color = [[IGBrush alloc] initWithR:.5 andG:.06 andB:.42 andA:1];
    item4.outlineColor = [[IGBrush alloc] initWithR:0 andG:0 andB:0 andA:1];
    [def.seriesPalettes addObject:item4];
    
    IGChartPaletteItem* item5 = [[IGChartPaletteItem alloc] init];
    item5.color = [[IGBrush alloc] initWithR:.98 andG:.66 andB:.06 andA:1];
    item5.outlineColor = [[IGBrush alloc] initWithR:0 andG:0 andB:0 andA:1];
    [def.seriesPalettes addObject:item5];
    
    
    IGChartPaletteItem* axis = [[IGChartPaletteItem alloc] init];
    axis.outlineColor = [[IGBrush alloc] initWithR:.72 andG:.72 andB:.72 andA:1]; 
    def.axisPalette = axis;   
    
infraChart.theme = def;

In C#:

IGChartThemeDefinition def = new IGChartThemeDefinition();
   def.Font = UIFont.FromName("Helvetica", 12);
   def.FontColor = new IGBrush(0,0,0,1);

   def.LegendFont = UIFont.FromName("Helvetica", 12);
   def.LegendFontColor = new IGBrush(0,0,0,1);
   def.LegendBorderThickness = 1;
   def.LegendPalette = new IGChartPaletteItem();
   def.LegendPalette.Color = new IGBrush(0.9f,0.9f,0.9f,1);
   def.LegendPalette.OutlineColor = new IGBrush(0.7f,0.7f,0.7f,1);
  
   IGChartPaletteItem item1 = new IGChartPaletteItem();
   item1.Color = new IGBrush(0.0f,0.63f,0.88f,1);
   item1.OutlineColor = new IGBrush(0,0,0,1);
   def.SeriesPalettes.Add(item1);
  
   IGChartPaletteItem item2 = new IGChartPaletteItem();
   item2.Color = new IGBrush(0.54f,0.6f,0.05f,1);
   item2.OutlineColor = new IGBrush(0,0,0,1);
   def.SeriesPalettes.Add(item2);
  
   IGChartPaletteItem item3 = new IGChartPaletteItem();
   item3.Color = new IGBrush(0.94f,0.3f,0.05f,1);
   item3.OutlineColor = new IGBrush(0,0,0,1);
   def.SeriesPalettes.Add(item3);
  
   IGChartPaletteItem item4 = new IGChartPaletteItem();
   item4.Color = new IGBrush(0.5f,0.06f,0.42f,1);
   item4.OutlineColor = new IGBrush(0,0,0,1);
   def.SeriesPalettes.Add(item4);
  
   IGChartPaletteItem item5 = new IGChartPaletteItem();
   item5.Color = new IGBrush(0.98f,0.66f,0.06f,1);
   item5.OutlineColor = new IGBrush(0,0,0,1);
   def.SeriesPalettes.Add(item5);

  
   IGChartPaletteItem axis = new IGChartPaletteItem();
   axis.OutlineColor = new IGBrush(0.72f,0.72f,0.72f,1);
   def.AxisPalette = axis;  
  
   chart.Theme = def;


Related Content

Topics

The following topic provides additional information related to this topic.

Topic

Purpose

This topic serves as a gateway to the features and functionality of the IGChartView control.