ChartView Class

Visualizes data in the Cartesian coordinate system.

Namespace: DevExpress.XamarinForms.Charts

Assembly: DevExpress.XamarinForms.Charts.dll

Declaration

public class ChartView :
    ChartBaseView

Remarks

This view supports a wide variety of Cartesian series types and allows you to display data as any of the basic chart types or combination of different series views.

ChartView's properties allow you to add data series to a chart, configure chart axes, specify chart elements (legend, series labels and hints), and customize the chart appearance.

Chart View Elements

Chart Series

A chart visualizes data which series provide. Each series defines data appearance and behavior. ChartView supports different series types you can use to show data as areas, bars, points, bubbles, lines, etc.

Show Supported Series Types

Chart

Series Type

Area

AreaSeries

Displays data as filled areas on a chart, with each data point as a peak or hollow in this filled area.

Stacked Area

StackedAreaSeries

Displays data as areas on a chart, so that each data point value is aggregated with values of the underlying data points.

Full Stacked Area Series

FullStackedAreaSeries

Displays data as areas on a chart, so that each data point value is stacked with values of all the other corresponding data points and the total area is always the full area of the chart diagram.

Step Area Series

StepAreaSeries

Displays data as filled areas on a chart, with data points connected by horizontal and vertical lines.

Bar Series

BarSeries

Displays data as individual bars grouped by arguments, and each bar height is determined by the data value.

Stacked Bar Series

StackedBarSeries

Displays data as bars stacked by arguments, so that each stacked bar height is determined by the total of all the series values for the argument.

Full Stacked Bar Series

FullStackedBarSeries

Displays data as bars stacked by arguments, so that each stacked bar height is always the full height of the chart diagram and series values are displayed as percentages of a bar.

Side-By-Side Stacked Bar Series

SideBySideStackedBarSeries

Displays data as bars stacked according to the StackedGroup property value and grouped by arguments.

Side-By-Side Full Stacked Bar Series

SideBySideFullStackedBarSeries

Displays data as bars stacked according to the StackedGroup property value and grouped by arguments.

Range Bar Series

RangeBarSeries

Displays data as bars grouped by arguments. Each bar shows the range between two data values for each argument value.

Point Series

PointSeries

Displays data as a collection of points.

Line Series

LineSeries

Displays data as points connected by a line.

Step Line Series

StepLineSeries

Displays data as points connected by horizontal and vertical lines.

Scatter Line Series

ScatterLineSeries

Displays data as a collection of points connected by a line, in the order they were indexed (opposite to LineSeries that automatically sorts all series points within the collection by their arguments).

Bubble Series

BubbleSeries

Displays three-dimensional data as a collection of bubbles, so that each bubble position visualizes the first two dimensions and the bubble size is the third dimension.

Stock Series

StockSeries

Displays an Open-High-Low-Close typical financial series so that each data point consists of a vertical line indicating the price range over one unit of time, and the left and right tick marks showing the opening and closing prices for that time period, respectively.

Candle Stick Series

CandleStickSeries

Displays an Open-High-Low-Close typical financial series so that each data point consists of a vertical line indicating the price range over one unit of time and a rectangle showing the opening and closing prices for that time period.

NOTE

To display Pie series, use the PieChartView view instead.

To add a series to a chart, add a series object of a type the ChartView supports to the ChartView.Series collection.

<ContentPage.BindingContext>
    <local:MainViewModel/>
</ContentPage.BindingContext>
<dxc:ChartView>
    <dxc:ChartView.Series>
        <dxc:LineSeries>
            <dxc:LineSeries.Data>
                <dxc:SeriesDataAdapter DataSource="{Binding EuropePopulationData}"
                                       ArgumentDataMember="Year">
                    <dxc:ValueDataMember Type="Value" Member="Population"/>
                </dxc:SeriesDataAdapter>
            </dxc:LineSeries.Data>
        </dxc:LineSeries>
    </dxc:ChartView.Series>
</dxc:ChartView>
Show View Model
public class MainViewModel {
   public List<DateTimeData> EuropePopulationData { get; }

   public MainViewModel() {
       EuropePopulationData = new List<DateTimeData> {
           new DateTimeData(new DateTime(1950, 1, 1), 546),
           new DateTimeData(new DateTime(1960, 1, 1), 605),
           new DateTimeData(new DateTime(1970, 1, 1), 656),
           new DateTimeData(new DateTime(1980, 1, 1), 694),
           new DateTimeData(new DateTime(1990, 1, 1), 721),
           new DateTimeData(new DateTime(2000, 1, 1), 730),
           new DateTimeData(new DateTime(2010, 1, 1), 728),
           new DateTimeData(new DateTime(2020, 1, 1), 721),
           new DateTimeData(new DateTime(2030, 1, 1), 704),
           new DateTimeData(new DateTime(2040, 1, 1), 680),
           new DateTimeData(new DateTime(2050, 1, 1), 650)
       };
   }
}

public class DateTimeData {
   public DateTime Year { get;}
   public double Population { get; }

   public DateTimeData(DateTime year, double population) {
       this.Year = year;
       this.Population = population;
   }
}

Axes

The ChartView uses the axis of arguments (X-axis) and the axis of values (Y-axis) to define coordinates of data points on a chart. You can set chart axes with the ChartView.AxisX and ChartView.AxisY properties.

To customize a chart's X-axis or Y-axis, create an axis object of the supported type, configure it, and assign it to the ChartView.AxisX or ChartView.AxisY property.

Axis

Supported Types

X-Axis

DateTimeAxisX

NumericAxisX

QualitativeAxisX

Y-Axis

NumericAxisY

At the chart level, you can specify a single axis X and a single axis Y. In some scenarios, these two axes are not enough. For example, if it's required to display series of different ranges of values on the same chart, or have different arguments or values within a single diagram. In these cases, to increase data readability, you can associate each series on your chart with a separate axis. To do this, use the Series.AxisX or Series.AxisY properties.

Several series can share a secondary axis. To achieve that, add a new axis object to the resource dictionary, and assign it to the AxisX or AxisY property of the series you want to associate with this axis.

To adjust the axis layout, use the DisplayPosition and Layout properties.

Chart View Elements

Implements

Xamarin.Forms.IAnimatable
Xamarin.Forms.IViewController
Xamarin.Forms.IVisualElementController
Xamarin.Forms.IElementController
Xamarin.Forms.Internals.IGestureController

Inheritance

Object
Xamarin.Forms.BindableObject
Xamarin.Forms.Element
Xamarin.Forms.NavigableElement
Xamarin.Forms.VisualElement
See Also