Skip to end of metadata
Go to start of metadata

UXChart consists of numerous visual elements that work together to produce wonderful charting experiences. In addition, most of the visual elements are fully customizable. There are two main category of UXChart elements: UXChart specific and Series specific.

On this page:

UXChart Specific

Plot Area

A plot area is the rectangular area where all series are drawn. It is displayed by default and has a white background color as well as a black border line. The chart data is rendered in the plot area.The plot area changes for different chart types.

You can add borders to and change the default background color of the chart plot area. You can change style of plot area using PlotAreaStyle property, and PlotAreaBorderStyle Property

Title

Title Element is not always put on the top of control, there are several mode that you can use. you can choose from TitlePosition property. There are eight position that you can choose from:

  • BottomTitle position on bottom of the chart
  • BottomLeft
    Title position on left side of bottom chart
  • BottomRight
    Title position on right side of bottom chart
  • Left
    Title position on left side of chart
  • Right
    Title position on right side of chart
  • Top
    Title position on top of the chart
  • TopLeft
    Title position on left side of chart
  • TopRight
    Title position on right side of chart

Beside TitlePosition, you can also set the title visibility to visible or collapsed using TitleVisibility property. If you would like to customize further, you can customize the title style through the TitleStyle property.

The following example shows how to set TitlePosition.

XAML

Legend

Legend usually contains a list of the series appearing in the chart and an example of their appearance, which by default appear as colorful rectangle. You can also change the appearance using LegendItemStyle property, This information allows the data from each variable to be identified in the chart.

Depending on the type of chart, the legend keys represent different groups of data. For instances, for a LineSeriesBarSeries or ColumnSeries, each legend key represents a single data series. On the other hand, a PieSeries or DoughnutSeries, each Legend key represents only a portion of one data series.

In a normal chart, the Legend is most often located on the right hand side of the chart and can sometimes be surrounded by a border. However, you can set the position of Legend to your liking by using LegendPosition property of UXChart. There are eight position that you can choose from:

  • BottomLegend position on bottom of the chart, and orientation is horizontal
  • BottomLeftTitle position on left side of bottom chart,and orientation is horizontal
  • BottomRightTitle position on right side of bottom chart, and orientation is horizontal
  • LeftTitle position on left side of chart, and orientation is vertical
  • RightTitle position on right side of chart, and orientation is vertical
  • TopTitle position on Top of the chart, and orientation is horizontal
  • TopLeftTitle position on left side of chart, and orientation is horizontal
  • TopRightTitle position on right side of chart, and orientation is horizontal

The following sample show how to set LegendPosition

XAML

LegendTitle is a textual element at the top of legend list element. You can set this textual element using LegendTitle property of UXChart and if needed you can also collapse the legend title element through the LegendTitleVisibility property.

UXChart provides full control over legend appearance. You are able to specify the shape of the Legend Item Markers just by setting the style. It can be different shapes, such as rectangle, ellipse, or even an image. you can also set its style using LegendStyle and LegendItemStyle.

The following example shows how to customize legend item and appearance.

XAML

Zoom Scroll Bar

Zoom scroll bar is a slider type bar that can be used to zoom, move, and indicate position of the elements in the chart area. It can be put on bottom or left side of chart, have two thumbs on each end, and can be dragged or click to zoom in or zoom out the chart elements. Furthermore, it can also be used for panning.

There are two zoom bars in UXChart, you can control their visibility through HorizontalZoomScrollBarVisibility and VerticalZoomScrollBarVisibility properties. The visibility of these property is preceded by ZoomMode, if the ZoomMode is set to X, the VerticalZoomScrollBar will be forced to be collapsed regardless the settings in VerticalZoomScrollBarVisibility.

The following example shows how to apply style to zoom scroll bar.

XAML

Data Annotation

DataAnnotation is a text area that can be utilized for adding information or detail inside the chart. This feature is particularly useful when you want to show significant changes in your data and you need to explain the cause. In this particular scenario, you can give more sense to your data by annotating the additional information.

DataAnnotations are visual elements that can be used to mark points or areas of some significance. Annotations are anchored to specific coordinates in the inner frame based on specified IndependentValue and DependentValue.

The following example show how to use data annotation in UXChart.

XAML

 

Series Specific

Palette

Palette is a range of colors used in a particular series in chart. it's a collection of resources consist of many color, that already pre define into PalleteType. there are four types of palettes that you can choose

  • Default
  • Vivid
  • Earth Color
  • Pastel

Beside the types mentioned above ,you can define your own collection of color palettes and apply it to customize your chart. When using either built-in palettes or custom palettes, you can define in which order the color will appear. There are three modes that you can choose.

  • SequentialThe order of the color appears in sequence as defined in the palette, from the first until the last.
     
  • RandomThe order of the color appears randomly.
     
  • CustomYou can specify the order of the colors of which number you would like to display. The order of the color should be separated by a comma, for instances, "1,5,3,2" will show the colors with index 1 first, then followed with colors in 5th, 3rd and 2nd index.

Border Style

In addition to customizing color palettes, you can also set the data point's border style by using BorderStyle property. There are three mode that you can choose.

  • EmbossStyle to decorate with or as if with a raised design.
     
  • FlatStyle with a flat and borderless look.
     
  • Metro
    Style with neat, modern and clean look.

To learn more how to customize the palette, see How-to: Add Custom Palettes in UXChart.

 

Data Point

DataPoint is set of data that consist information for your chart display, it can appear as small rectangle, bar, circle, or line. It usually have color to distinguish one set of data points from other series data points. By default, DataPoint uses color from the predefined collection of color palette. But you can override style from given palette by using custom palette.

As for Style, you can apply style to data point so it can appear as rectangle, circle or others. by simply assigning the desired style to the DataPointStyle property.

By default, a set of data points in one series will have same color, however if you want each data point in one series to use different colors, you can use DataPointStyleSelector to change its color. It behaves similarly with others style selector.

Data Label

DataLabel is text label that appear on data point to display information of data point, such as value, or percentage. You can set its visibility to be visible or collapsed using DataLabelVisibility property.

As for position you can set data label position to be inside or outside data point. When data label is used in bar chart you may need to rotate the position of DataLabel. You can set the angle using DataLabelAngle properties on UXChart.

Data label have line shape connector to connect the data label and data point. You can set connector length with DataLabelConnectorLength property. You can also set its visibility through the DataLabelConnectorVisibility property. In most cases, data label connector will appear straight, but there's another mode which is spider, applicable only in Pie and Doughnut series.

The following sample shows how to use data label.

XAML