Skip to end of metadata
Go to start of metadata

When you build either enterprise or consumer apps, you will inevitably deal with data. Most apps deal with collecting data, however, without further processing, it doesn't provide significant value towards overall business analysis and strategy. As data became bigger and more complex, it will be harder to cognitively process data without some form of visual representation. Typically, charting is one solution that comes to mind. By visualizing data, one can make better business decisions based on the processed data. Featuring over 20+ chart types with many powerful capabilities, Crosslight Charting enables you to visualize various forms of data right to your mobile apps, making data more meaningful and more understandable.

Crosslight Charting Feature

  • MVVM Ready

    Crosslight Charting is built on MVVM, so if you are already familiar with MVVM concept, Crosslight Charting should be simple to implement.
  • Automatic Axis Type and Axis Values Generation
    Crosslight Charting will determine what type of axis is suitable for your chart. Just provide the data and Crosslight Charting will try its best to generate the axis and determine perfect axis values based on your data range and size of the Chart. 
  • Automatic Axis Label Rendering
    Crosslight Charting also provide automatic layouting if any label in axis collides with other label or even exceeding axis bounds. Crosslight Charting will make axis label double stacked, triple stacked, and even rotated so every label won't collide. Crosslight Charting will shift its axis label if even a tiny part of the label exceeding axis bound.
  • Pixel Perfect Rendering
    Crosslight Charting is vector-rendered, and it will retain its high fidelity even when it's zoomed, panned, or scrolled.
  • Smooth Animation
    Crosslight Charting will animate smoothly when it's generated, any data is changed, or new series are added. Crosslight Charting also gives you the freedom to change the animation duration.
  • Best Zoom and Pan Experience
    Crosslight Charting will intuitively zoom in the series area and not the entire view. Crosslight Charting zoom capability can also be configured to only zoom horizontally, vertically or in both direction. 
  • Highly Customizable
    Since every user has their own preferences about how the chart should look like, almost every part of Crosslight Charting can be configured.

Chart Element Overview

A chart is composed of various elements such as legends, axes, series, and other chart elements. Each chart element corresponds to an object.

The following picture shows many of the chart elements in the following figure.

Using Crosslight Chart

Crosslight Charting is a cross platform component that is built using the MVVM design pattern. To learn more about MVVM design pattern, see Understanding Data Binding and MVVM Design Pattern

It's very simple to use Crosslight Charting. Since it's built based on MVVM design pattern, all you need to do is add the chart control in your view, bind the view with Crosslight Charting component model and finally configure the Crosslight Charting component model entirely in ViewModel. 

To learn more how to use Crosslight Chart, see Using Crosslight Chart.

Understanding Chart Series

Series is a related group of data points that represents the data. Crosslight Charting supports 20+ series types that allows you to represents any data you may have. Furthermore, you can use multiple series with the same type in one chart.

To learn more how Crosslight Charting series works, see Understanding Chart Series.

Understanding Chart Axis

Axis is an element of a chart that acts as a description about what part of the data it represent (Dependent Axis) and its measurement (Independent Axis). Crosslight Charting consists of 3 axis types: CategoryAxis, NumericAxis and DateTimeAxis. Crosslight Charting axis is also built with many powerful capabilities such as automatic axis type, automatic axis value generation and automatic layouting.

To learn more how Crosslight Charting axis works, see Understanding Chart Axis.

Understanding Chart Legend

Chart legend is a list of items that describes the chart series or data points that drawn in the chart area. The legend is auto generated based on series type and the data points that you provide to chart component model. If needed, you can also change the appearance of the chart legend through chart component model as well. 

To learn more how Crosslight Charting legend works, see Understanding Chart Legend.

Understanding Chart Title

Title is an element of a chart that describes the information visualized by the chart. You can also customize the look and feel of the chart title along with its position and also alignment.

To learn more how Crosslight Charting title works, see Understanding Chart Title.

Configuring Chart Appearance

Crosslight Charting gives you the freedom to configure almost every aspect from its appearance. You can change anything: Font, Title Visibility, Legend, Axis elements, and Series Color.

To learn more, see Configuring Chart Appearance.

Understanding Animation

Crosslight Charting is built with smooth and elegant animation to make it more engaging. Crosslight Charting also gives you the freedom to change its animation duration. 

To learn more, see Understanding Animation.

Enabling Zoom

When viewing the chart on mobile devices with small screen size may give poor user experience, since the series and data points will look small and hard to analyze. Therefore, Crosslight Charting provides a way to enable zoom in the chart control. You can control the zoom mode and its behavior. You can also set the initial zoom of the chart if needed. 

To learn more how to enable zoom in Crosslight chart, see Enabling Zoom.

Using Data Annotation

Annotations are text notes that can be attached as a label along your chart’s dependent axis. In enterprise scenario, you might want to annotate your chart with this data annotation to state outstanding info that makes the chart more understandable.

To learn more how to annotate the chart with data annotation, see Using Data Annotation.


To see Crosslight Charting in action, please check out the comprehensive charting samples here. The samples demonstrate each chart series and possible feature configuration, including chart appearance customization, palette settings, and several gorgeous reference samples.

Getting Started

To get started with Crosslight Charting, consult this document.