Android Charts Theme Customization

Deprecated

As of SmartDevicesPlus 6, this control was removed from SmartDevicesPlus controls library.

Please check documentation for Chart User Control

Summary

Selecting custom theme allows you to customize the chart look and feel by manually selecting each of the charts colors. Once enabled custom theme you will have to write the following properties:

The GeneXus IDE Styles editor for the SDPAndroid theme shows the IguanaUIChart class selected in the class tree, with a red arrow pointing to the Properties panel's SmartDevicesPlus section, where Chart General Theme is set to Custom and Custom Theme Properties lists Legend Class SDPLegendLabel, Series Color Collection hex values, Outline Color, and axis line/label/strip colors.

Legend Class

This property allows you to customize the legend look and feel. You can write the name of a textblock class and the user control will read its properties and use them to customize the chart.

The following properties of the class will be read:

  • Background Color: Is used to paint the legend box background color.
  • Forecolor: Is applied to the legend labels

"Legend Location" must be set to either Top or Bottom in order to see this property.

e.g. if we set the Legend Class to "SDPLegendLabel":

The GeneXus Styles editor shows the TextBlock class tree with SDPLegendLabel selected; two red arrows in the Properties panel point to the Background Color field set to RoyalBlue and the Forecolor field set to Red, indicating where the chart legend label's colors are configured.

We will obtain the following legend:

A chart legend bar on a blue background displays three series labels in red text with colored swatches: Sales (light blue), Units (teal), and Cost (olive), positioned above a row of orange and green axis tick marks.

Value Axis Major Lines Color and Category Axis Major Lines Color

This properties allows you to customize the major lines look and feel. The property 'Value Axis Major Lines Color' modify the Horizontal major lines, while the property 'Category Axis Major Lines Color' modify the Vertical major lines.

The Properties panel's Custom Theme Properties section for a chart shows two red arrows pointing to Value Axis Major Lines Color and Category Axis Major Lines Color, both set to Lime, alongside other listed settings like Series Color Collection, Outline Color, and minor/label/strip colors.
 

A zoomed-in bar chart detail shows a red arrow pointing to a green horizontal gridline near the top of the plot area, labeled as the value axis major line, set against a background grid of thinner orange lines and multicolored data bars.
 

Value Axis Minor Lines Color and Category Axis Minor Lines Color

This properties allows you to customize the minor lines look and feel. The property 'Value Axis Minor Lines Color' modify the Horizontal minor lines, while the property 'Category Axis Minor Lines Color' modify the Vertical minor lines.

The Properties panel's Custom Theme Properties section shows two red arrows pointing to Value Axis Minor Lines Color and Category Axis Minor Lines Color, both set to DarkOrange, distinguishing minor gridline settings from the major gridline color rows above and below them.


A zoomed-in bar chart detail shows a red arrow pointing to thin orange horizontal gridlines between the thicker green major gridlines, illustrating the minor axis line color setting against a background of colored data bars.

Outline Class

This property allows you to customize the chart data outlines look and feel.

The Properties panel's Custom Theme Properties section shows a red arrow pointing to the Outline Color field set to DarkViolet, listed above the value and category axis major/minor line, label, and strip color rows for a chart style.


A zoomed-in bar chart detail shows a red arrow pointing toward a bar with a purple/violet outline near a green gridline, illustrating how the configured Outline Color renders as the border stroke around each data bar.

Value Axis Labels Color and Category Axis Labels Color

This properties allows you to customize the axis category and values labels look and feel. The property "Value Axis Labels Color" modify the color of the axis Y labels, while the "Category Axis Labels Color" modify the color ot the axis X labels.

The Properties panel's Custom Theme Properties section shows two red arrows pointing to Value Axis Labels Color set to Crimson and Category Axis Labels Color set to Teal, among the other chart theme settings like Series Color Collection and Outline Color.


A range/band area chart plots values for grocery-style categories Armchair, Fruit Salad, Fruit Candy, Beer, Tennis ball, Cup, Red Wine, Chocolates Kit Kat, Ferrero Rocher and a partially visible item, with a filled orange-red band and diamond markers, peaking near 1600 on the y-axis at the rightmost category.

Series Color Collection

This property allows allows you to customize the series colors. Colors must be specified between commas e.g.: #3b6299c8, #fcc23cc8, #f96650c8

If the charts has more colors than the specified in this property colors will be repeated.

The following example shows the result of setting the property to: "#ff0000ff, #00ff00ff"

Bar chart comparing three category groups labeled Cup, Mate, and Lumia, each with a red bar and a green bar rendered with a gradient fade toward white at the base. The red bars reach roughly 570 and 650 on the value axis while the green bars stay under 220, illustrating a two-series comparison layout.

Value Axis Strip Color and Category Axis Strip Color

This properties define the background color between two major lines. The property "Value Axis Strip Color" defines the horizontal color and the property "Category Axis Strip Color" defines the vertical color.

SmartDevicesPlus chart theme property grid showing Chart General Theme set to Custom, Columns Gap Default, and Columns Overlap None, followed by Custom Theme Properties: Legend Class SDPLegendLabel, a Series Color Collection of hex values, Outline Color, and axis line/label/strip colors. Red arrows point to the Value Axis Strip Color row set to Aqua and the Category Axis Strip Color row set to Gray.


Line chart with a blue-filled area over a background of alternating cyan and gray vertical stripes, plotting values from 0 to over 500 across category labels including Armchair, Fruit Salad, Fruit Candy, Beer, Tennis ball, Cup, Red Wine, Chocolates Kit Kat, Ferrero Rocher, and Living, with the line spiking sharply upward at the last category.