Charts customizations

WorkWithPlus for Native Mobile Charts user control look and feel can be customized using the theme class "SmartDevicesPlusChart".

sdp_usercontrols_charts_themeclass

Legend Class

This property allows you to customize the legend's 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: It 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":

AndroidThemeCustomizationImg02

We will obtain the following legend:

AndroidThemeCustomizationImg03

Value Axis Major Lines Color and Category Axis Major Lines Color

These properties allow 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.

AndroidThemeCustomizationImg04
 

AndroidThemeCustomizationImg05
 

Value Axis Minor Lines Color and Category Axis Minor Lines Color

These properties allow 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.

This property is currently only available in Android

AndroidThemeCustomizationImg06


AndroidThemeCustomizationImg07

Outline

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

AndroidThemeCustomizationImg08


AndroidThemeCustomizationImg09

Value Axis Labels Color and Category Axis Labels Color

These properties allow 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.

AndroidThemeCustomizationImg10


AndroidThemeCustomizationImg11

Series Color Collection

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

If the chart 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"

AndroidThemeCustomizationImg12

Value Axis Strip Color and Category Axis Strip Color

These 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.

This property is currently only available in Android

AndroidThemeCustomizationImg13


AndroidThemeCustomizationImg14